过当爱情遇上美,那么一切便啥都好说。
当Vue遇上ECharts,那便一切都难说。
之前运用的ECharts:
百度搜索,ECharts
=>进入官网
=>找到实例,打开它
=>找到差不多的模型,双击
=>看见实例代码,Ctrl+A、Ctrl+C、Ctrl+V,欧克了。
修修改改,有模有样,自我感觉还不错。
然鹅,vue上操作,一切并不是想象的那么美好。
- vue安装ECharts 在webpack中使用ECharts,万能的npm(你怕吗)。
npm install echarts --save
需要的文件中使用
import echarts from "echarts";
- 一切就绪,让我们开始老套路吧
<template>
<div class="chart">
<div id="leftFiveDuty"></div>
<div id="leftFourState"></div>
</div>
</template>
import echarts from "echarts";
import {
leftFiveDutyOption,
leftFourStateOption
} from "@/utils/echartsOption.js";
//leftFiveDutyOption,leftFourStateOption是从utilsechartsOption的文件中导出来的图表设置
export default {
name: "HelloWorld",
props: {
msg: String
},
data() {
return {
leftFiveDuty: {
select: "day",
chart: ""
},
leftFourState: {
select: "day",
chart: ""
},
fiveDutys: [
{
name: "医生",
value: "9"
},
{
name: "教师",
value: "3"
},
{
name: "码农",
value: "15"
},
{
name: "农民",
value: "5"
},
{
name: "农民工",
value: "7"
}
],
FourState: [
{
name: "在线",
value: "9"
},
{
name: "离线",
value: "6"
},
{
name: "忙碌",
value: "1"
}
],
allDutyNum: 0,
allStateNum: 0
};
},
mounted() {
this.getChartsData();
},
methods: {
initEcharts() {
//创建echart对象
this.leftFiveDuty.chart = echarts.init(
document.getElementById("leftFiveDuty")
);
this.leftFourState.chart = echarts.init(
document.getElementById("leftFourState")
);
this.leftFiveDuty.chart.setOption(leftFiveDutyOption);
// this.leftFiveDuty.chart.on("click", function(params) {
// clearInterval(current.timer);
// clearInterval(current.nowtimer1);
// });
this.leftFourState.chart.setOption(leftFourStateOption);
// this.leftFourState.chart.on("click", function(params) {
// clearInterval(current.timer);
// clearInterval(current.nowtimer2);
// });
},
getChartsData() { //给图表赋值
let leftFiveDutyRes = this.formatEchartData(this.fiveDutys);
this.allDutyNum = 0;
leftFiveDutyRes.valueArr.forEach(v => {
this.allDutyNum += v;
});
leftFiveDutyOption.series[0].data = this.fiveDutys;
leftFiveDutyOption.title.text = [ //设置饼图中间文字的方法
"{name|职能人数}",
"{value|" + this.allDutyNum + "}"
].join("\n");
//饼二
leftFourStateOption.series[0].data = this.FourState;
// leftFourStateOption.series[1].data = data.statusPie;
let leftFourStateRes = this.formatEchartData(this.FourState);
this.allStateNum = 0;
leftFourStateRes.valueArr.forEach(v => {
this.allStateNum += v;
});
// console.log("hhh", leftFourStateRes, this.allStateNum);
leftFourStateOption.title.text = [
"{name|勤务状态}",
"{value|" + this.allStateNum + "}"
].join("\n");
this.initEcharts();
},
formatEchartData(data) {
let res = { nameArr: [], valueArr: [] };
data.forEach(e => {
res.nameArr.push(e.name);
res.valueArr.push(parseInt(e.value));
});
return res;
}
}
};
</script>
<style lang="less" scoped>
.chart {
width: 100%;
height: 100%;
/* border: 1px solid red; */
// padding-left: 10px;
// padding-right: 10px;
#leftFiveDuty {
display: inline-block;
width: 50%;
height: 100%;
// background-color: red;
}
#leftFourState {
display: inline-block;
width: 50%;
height: 100%;
// background-color: blue;
}
}
</style> //一定要设置app的宽和高哦;
3. echarts具体设置
echartsOption.js文件
let leftFiveDutyOption = {
color: ['#00d3e1', '#2faddc', '#d04e58', '#ea702e', '#f1e329'], //环形颜色
// color:['#00d3e1','#2faddc','#0084bc','#3d4596','#d04e58','#d3666b','#ea702e','#f3a253','#f1e329','#00f993'], //环形颜色
title: {
zlevel: 0,
text: [
'{name|职能人数}',
'{value|' + 0 + '}',
].join('\n'),
rich: {
value: {
color: '#02d6d6',
fontSize: 50,
fontWeight: 'bold',
lineHeight: 50,
},
name: {
color: '#02d6d6',
lineHeight: 50
},
},
top: 'center',
left: '480',
textAlign: 'center',
textStyle: {
rich: {
value: {
color: '#02d6d6',
fontSize: 50,
fontWeight: 'bold',
lineHeight: 50,
},
name: {
color: '#02d6d6',
lineHeight: 50
},
},
},
},
series: [
{
data: [],
type: 'pie', // 系列类型
center: ['51%', '50%'], // 饼图的中心(圆心)坐标,数组的第一项是横坐标,第二项是纵坐标。[ default: ['50%', '50%'] ]
radius: ['52%', '70%'], // 饼图的半径,数组的第一项是内半径,第二项是外半径。[ default: [0, '75%'] ]
hoverAnimation: true, // 是否开启 hover 在扇区上的放大动画效果。[ default: true ]
avoidLabelOverlap: true,
itemStyle: {},
label: { // 饼图图形上的文本标签,可用于说明图形的一些数据信息,比如值,名称等.
normal: {
show: true, // 是否显示标签[ default: false ]
position: 'outside',
formatter: '{c} \n {b}',
// return data.name +"\n"+ data.value+"\n"+"人"
// },
rich: {
b: {
fontSize: 14,
align: 'left',
fontWeight: 'bold'
},
c: {
fontSize: 16,
align: 'right',
fontWeight: 'bold'
},
},
},
emphasis: {
show: true,
position: 'outside', // 标签的位置。'outside'饼图扇区外侧,通过视觉引导线连到相应的扇区。'inside','inner' 同 'inside',饼图扇区内部。'center'在饼图中心位置。
shadowColor: 'rgba(30,144,255,0.5)',
formatter: '{c} \n {b}', // 标签内容
textStyle: {
fontSize: '12',
fontWeight: 'bolder'
},
length: 1
}
},
labelLine: { // 标签的视觉引导线样式,在 label 位置 设置为'outside'的时候会显示视觉引导线。
normal: {
show: true, // 是否显示视觉引导线。
length: 15, // 在 label 位置 设置为'outside'的时候会显示视觉引导线。
length2: 10, // 视觉引导项第二段的长度。
lineStyle: { // 视觉引导线的样式
// color: '#000',
// width: 1
}
}
},
},
]
};
let leftFourStateOption = {
color: ['#00c5c7', '#00face', '#00caff', '#00eeff', '#0084bc'], //环形颜色
title: {
zlevel: 0,
text: [
'{name|在线人数}',
'{value|' + 0 + '}',
].join('\n'),
rich: {
value: {
color: '#02d6d6',
fontSize: 50,
fontWeight: 'bold',
lineHeight: 50,
},
name: {
color: '#02d6d6',
lineHeight: 50
},
},
top: 'center',
left: '480',
textAlign: 'center',
textStyle: {
rich: {
value: {
color: '#02d6d6',
fontSize: 50,
fontWeight: 'bold',
lineHeight: 50,
},
name: {
color: '#02d6d6',
lineHeight: 50
},
},
},
},
series: [
{
data: [],
type: 'pie', // 系列类型
center: ['50%', '50%'], // 饼图的中心(圆心)坐标,数组的第一项是横坐标,第二项是纵坐标。[ default: ['50%', '50%'] ]
radius: ['52%', '70%'], // 饼图的半径,数组的第一项是内半径,第二项是外半径。[ default: [0, '75%'] ]
hoverAnimation: true, // 是否开启 hover 在扇区上的放大动画效果。[ default: true ]
avoidLabelOverlap: true,
itemStyle: {},
label: { // 饼图图形上的文本标签,可用于说明图形的一些数据信息,比如值,名称等.
normal: {
show: true, // 是否显示标签[ default: false ]
// position: 'center',
formatter: '{b} \n {c}',
rich: {
b: {
fontSize: 12,
align: 'left',
},
c: {
fontSize: 16,
align: 'left',
fontWeight: 'bolder'
},
},
},
emphasis: {
show: true,
position: 'outside', // 标签的位置。'outside'饼图扇区外侧,通过视觉引导线连到相应的扇区。'inside','inner' 同 'inside',饼图扇区内部。'center'在饼图中心位置。
shadowColor: 'rgba(30,144,255,0.5)',
formatter: '{b} \n {c}', // 标签内容
textStyle: {
fontSize: '12',
fontWeight: 'bold'
},
length: 1
}
},
labelLine: { // 标签的视觉引导线样式,在 label 位置 设置为'outside'的时候会显示视觉引导线。
normal: {
show: true, // 是否显示视觉引导线。
length: 15, // 在 label 位置 设置为'outside'的时候会显示视觉引导线。
length2: 10, // 视觉引导项第二段的长度。
lineStyle: { // 视觉引导线的样式
// color: '#000',
// width: 1
}
}
},
},
]
};
export {
leftFiveDutyOption,
leftFourStateOption
};
- 在此基础之上还可以实现ECharts自动更新,点击暂停功能。
this.leftFiveDuty.chart.on("click", function() { //点击暂停取消定时器
clearInterval(current.nowtimer1);
});
//自动播放对图表分别加两个定时器即可
let current = this;
this.nowtimer1 = setInterval(function() {
current.reFresh();
}, 1500);
this.nowtimer2 = setInterval(function() {
current.reFreshStatus();
}, 1500);
this.initEcharts();
5. 就这样一个echart就自定义好啦!要是不懂的我们也可以一起探讨哦。ECharts内部样式很多,可以拿我的js去官网文档内对比着学习哦。
附源码:github.com/ClyingDeng/…