echarts 饼图移动端_vue-echarts移动端踩坑记录

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

1、安装vue-echarts包

npm install vue-echarts

2、折线图代码

template:

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:

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的强大，能够支持几乎所有的定制化需求，具体怎么去实现你的需求，需要不断的尝试。在此需要这篇记录能够帮助到大家的工作，也希望大家能够给予支持