Echarts 相关问题汇总

| 宽度 100px

问题描述：vue tabs 切换 echarts 宽度显示为 100px。

解决：使用 v-if 控制显示隐藏（进入对应的 tab，初始化对应的 echarts）

  <Tabs :animated="false" @on-click="switchTab">
    <TabPane label="回溯">
      <v-echarts :tabs="1" :width='width' v-if="tab==1"/>
    </TabPane>
    <TabPane label="累计">
      <v-echarts :tabs="2" :width='width' v-if="tab==2"/>
    </TabPane>
    <TabPane label="当期">
      <v-echarts :tabs="3" :width='width' v-if="tab==3"/>
    </TabPane>
  </Tabs>

原理：页面加载时，所有 echarts 进行初始化，然而隐藏的 echarts 父元素div宽度为 0，默认给了100px。

| Y 轴显示图片

var medals = {
        'Gold': require('../../assets/images/gold.png'),
        'Silver': require('../../assets/images/silver.png'),
        'Bronze': require('../../assets/images/bronze.png')
    };

yAxis 配置: [{
          name: '排名top10',
          data: [10, 9, 8, 7, 6, 5, 4, 'Bronze', 'Silver', 'Gold', '排名'],
          axisLabel: {
              formatter: function(value) {
                  if (value == "Gold" || value == "Silver" || value == "Bronze") {
                      return '{' + value + '| }';
                  } else {
                      return '{value|' + value + '}';
                  }
              },
              rich: {
                  value: {
                      align: 'left',
                      width: 20
                  },
                  Gold: {
                      height: 20,
                      backgroundColor: {
                          image: medals.Gold
                      }
                  },
                  Silver: {
                      height: 20,
                      backgroundColor: {
                          image: medals.Silver
                      }
                  },
                  Bronze: {
                      height: 20,
                      backgroundColor: {
                          image: medals.Bronze
                      }
                  }
              }
          }
      }]

| 自定义图例

legend-data-icon 通过 ‘path://’ 将图标设置为任意的矢量路径；详情见：SVG Path

| formatter

字符串模板

formatter: '{b}<br/>{a0}：{c0}%<br/>{a1}：{c1}%<br/>{a2}：{c2}%<br/>{a3}：{c3}%'

回调函数

formatter: (params)=>{
  console.log(params);
  return "自定义内容";
}

| 加载地图

引入 import 'echarts/map/js/china.js'