共计 1902 个字符，预计需要花费 5 分钟才能阅读完成。
最近手头一个项目需要做两个图，一个是折线图，一个饼图。由于是基于 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、拼图效果
