最近手头一个项目需要做两个图，一个是折线图，一个饼图。由于是基于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的强大，能够支持几乎所有的定制化需求，具体怎么去实现你的需求，需要不断的尝试。在此需要这篇记录能够帮助到大家的工作，也希望大家能够给予支持