vue-echarts移动端踩坑记录

最近手头一个项目需要做两个图，一个是折线图，一个饼图。由于是基于Vue的项目，第一时间就想到用vue-echarts来实现。vue-echarts本质上也是使用了echarts.js,只是包装成vue组件。

1、安装vue-echarts包

npm install vue-echarts

2、折线图代码

template:
<echarts :options="trendChart" ref="trendEchart"></echarts>

js:

import ECharts from 'vue-echarts/components/ECharts.vue'; //引用vue-echarts
import "echarts/lib/component/tooltip"; //按需加载相关的包
import "echarts/lib/chart/pie";
import "echarts/lib/chart/line";

export default {
  trendChart: {
    grid: {
      left: '10%',
      top: 52,
    },
    tooltip: {
        trigger: 'axis',
        showContent: true,
        position:function(p){   
          return [p[0] + 10000000000, 0]; //不需要显示弹层信息
        },
        formatter: (parmes)=>{  //选择折线图上的坐标可以获得相关值
          let value1 = parmes[0];
          let value2 = parmes[1];
          //拿到值后,需要在哪显示可以在这操作
  
        }
    },
    textStyle: {
      color: "#999",
    },
    label:{
      fontSize: 44,
    },
    xAxis: {
        type: 'category', //类目的行式，原样展示
        boundaryGap: false, //两边留白策略
        offset: 3, 
        axisLine:{
          show:false, //是否显示坐标轴轴线，默认显示
        },
        axisTick:{
          show: false, //是否显示坐标轴刻度
        },
        axisLabel: {
          interval: 10000,   //默认1,表示【隔一个标签显示一个标签】
          showMinLabel: true, //x轴只需要展示最小的和最大的值
          showMaxLabel: true,
          fontSize: 20,
          //padding: [10, 0, 0, 0], 这里可以设置坐标轴的标签的padding值
        },
        data: [], 
    },
    yAxis: {
        type: 'value',
        boundaryGap: false,
        axisLine:{
          show:false,
        },
        axisLabel:{
          fontSize: 22,
          formatter: '{value}%'  //格式化标签值
        },
        axisTick:{
          show: false,
        },
       lineStyle: {
        //网络线设置（只作用于非类目铀）
        show: true,
        color: "#f5f5f5",
        width: 1,
        type: "solid"
      },
      splitNumber: 5, //Y轴分格为几段
      min: value => {
        return value.min - 1; //最小显示的值
      },
      max: null, //最大显示的值
      interval: 2 //间隔
    },
    series: [{
        name: '本组合',
        type: 'line',
        silent: false,
        showSymbol: false, //不显示折线上的数据点，只在hover的时候显示
        smooth: false, //0-1之间,true时为曲线，flase为折线，线弯曲度
        color: '#e2b256',
        lineStyle:{
          width: 3, //线条宽度
        },
        data: []
    },{
      name: '上证指数',
      type: 'line',
      silent: false,
      showSymbol: false, //不显示折线上的数据点，只在hover的时候显示
      smooth: false, //0-1之间,true时为曲线，flase为折线，线弯曲度
      color: '#5eb8e2',
      data: []
    }]
  },
},
methods: {
    //计算Y铀min,max,interval三个值，保证Y铀能够均等
    computeYaxis(data) {
      let allValues = [];

      for (let k of data) {
        for (let v of Object.values(k)) {
          if (Number(v)) {
            allValues.push(v);
          }
        }
      }
      //拿到数据当中的最小值
      const min = Number.parseFloat(Math.min(...new Set(allValues))).toFixed(2);
      //让显示在坐标上的最小值<数据当中的最小值
      const newMin = min - 1;
      //拿到数据当中的最大值
      const max = Number.parseFloat(Math.max(...new Set(allValues))).toFixed(2);
      
      let interval = Math.abs(
         //移动端interval必须取整数才生效
        Math.ceil(Number.parseFloat((max - min) / 5).toFixed(2)) 
      );
      let newMax = Number.parseFloat(newMin + interval * 5).toFixed(2);
      //存在算出来的newMax值可能小于数据当中的max值
      if (newMax < max) {
        interval++; 
        newMax = Number.parseFloat(newMin + interval * 5).toFixed(2);
      }
      this.trendChart.yAxis.max = newMax;
      this.trendChart.yAxis.interval = interval;
    },
},
components: {
  echarts: ECharts,
}

3、折线图效果

初始状态

mouseover状态

移动端还需要考虑当touchmove到非echarts的地方，需要重置到初始状态，并到选中的当前坐标去掉等问题。

4、饼图代码

template:
<echarts :options="overViewOption"></echarts>
js:
export defalut {

//pie图   
pieColor: ["#edce91", "#deab6a", "#ffe2ac", "#fcefd6","#77623b"],               
overViewOption: {
    lineStyle: {
      color: "#e0bf80"
    },
    textStyle: {
      color: "#333",
      fontSize: 26
    },
    hoverOffset: 0,
    series: [
      {
        type: "pie",
        color: ["#edce91", "#deab6a", "#ffe2ac", "#fcefd6","#77623b"], 
        //每一块对应的色值
        hoverAnimation: false,
        // label:{
        //   normal:{
        //     show:false
        //   }
        // },
        radius: ["40%", "80%"],
        data: [],
      }
    ]   
 },

}

//从后端获取的数据
 let mainModelOverview = data.mainModelOverview.map((item,index) => {               
     return {
        value: Number.parseFloat(item.fundPercent),
        name: item.fundType + item.fundPercent +'%',
        emphasis:{
          itemStyle:{
            color: this.pieColor[index]   
            //鼠标放在pie图上对应区域高亮颜色，防止高亮变色（这是个坑）
          }
        },   
    }; 
  }); 
  this.$set(this.overViewOption.series[0], "data", mainModelOverview);

5、拼图效果

6、总结坑点

官网给的示例都是基于pc端，并没有移动端的示例。有些配置项的示例是用的echarts3，所以在使用的时候，同一个配置元素放在示例上编辑是没有问题的，但一旦放在项目当中就不生效（本项目是基于echarts4）。

• 事件支持：mouseover,click等pc端的事件。在移动端，touchmove事件需要取消选中状态需要自己加事件了。
• interval: 官方给的建议是不推荐使用。示例给的interval可以为小数。但在移动端interval加小数却不管用，如果想均等每一列，并能够正确展示数据，那么需要自己去计算了。
• api太多了，眼花...头疼...

不过，不得不佩服echarts的强大，能够支持几乎所有的定制化需求，具体怎么去实现你的需求，需要不断的尝试。在此需要这篇记录能够帮助到大家的工作，也希望大家能够给予支持