关于那些年遇到的echarts的问题

432 阅读1分钟

a. 一个页面tab左右两侧都有echarts,注意要用原生写tab切换,用v-if判断,不要用组件和v-show(原因不明)

b. 柱形图中显示的百分比如何使用后台返回的百分比,具体可以参考[blog.csdn.net/hudeyong926…]

c. echarts中图例可以是现有的图片(UI要求还原设计图),c参考链接[blog.csdn.net/zm_miner/ar…]

// 具体代码实例
import share from '../../assets/img/share.png';

data: [
              {
                name: '播放',
                icon:`image://${play}`
              },
              {
                name: '转发',
                icon: `image://${share}`,  // 自定义icon
              }
       ]

e. 关于echarts手机端自适应的问题

// 移动端自适应方法(尤其适应一个页面多echars)
    mobileResize(flag) {
      window.onresize = () => {
        flag.resize();
      };
    }
// 举例
var chart = echarts.init(document.getElementById('main'));
        this.mobileResize(chart);

f. 关于echarts显示暂无数据的两种方法

第一种方法
// 调用接口 给echarts参数赋值
      if (res.trendDate.length !== 0) {
      // 再次调用 初始化echarts(获取dom 放echarts 这一堆)
        this.dataTrend();
      } else {
        this.focusOnDataX = [];
        // 显示--暂无数据--
        const dom = document.getElementById('dataTrend');
        dom.innerHTML = '暂无相关数据';
        dom.style.cssText =
          'text-align:right; color: #999; border: none;line-height: 300px;';
        dom.removeAttribute('_echarts_instance_');
      }
第二种方法
在html中用v-show判断即可

g. 柱形图中横坐标或者纵坐标 在放数据的时候,会出现数据间隔出现的情形,问题描述和方法[blog.csdn.net/qq_37138818…]

h. 遇到多折线图折叠 出现各个点数值累加, 去掉或者stack取不同的值就可以了

series: [
          {
            name: '播放',
            type: 'line',
            stack: '总量0',
            data: [200, 1320, 1010, 340, 900, 2300, 2100],
            symbol: 'none',
            itemStyle: { normal: { color: '#158CFF' } },
          },
          {
            name: '收益',
            type: 'line',
            stack: '总量1',
            data: [2620, 820, 1910, 2340, 2900, 2200, 2310],
            symbol: 'none',
            itemStyle: { normal: { color: '#FF850A' } },
          }
        ],