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”; //引用vue-echarts
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, //x坐标轴线是否显示，默认显示
},
axisTick:{
show: false,
},
axisLabel: {
interval: 10000, //默认1,表示【隔一个标签显示一个标签】
showMinLabel: true, //x轴只需要展示最小的和最大的值
showMaxLabel: true,
fontSize: 20,
},
data: [],
},
yAxis: {
type: ‘value’,
boundaryGap: false,
axisLine:{
show:false,
},
axisLabel:{
fontSize: 22,
},
axisTick:{
show: false,
},
},
series: [{
name: ‘本组合’,
type: ‘line’,
smooth: true,
color: ‘#e2b256’,
data: []
},{
name: ‘上证指数’,
type: ‘line’,
smooth: true,
color: ‘#5eb8e2′,
data: []
}]
},
}
components: {
echarts: ECharts,
}

3、折线图效果

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、拼图效果