当,Vue遇上ECharts

354 阅读5分钟

过当爱情遇上美,那么一切便啥都好说。
当Vue遇上ECharts,那便一切都难说。
之前运用的ECharts:
百度搜索,ECharts
=>进入官网
=>找到实例,打开它
=>找到差不多的模型,双击
=>看见实例代码,Ctrl+A、Ctrl+C、Ctrl+V,欧克了。
修修改改,有模有样,自我感觉还不错。
然鹅,vue上操作,一切并不是想象的那么美好。

  1. vue安装ECharts 在webpack中使用ECharts,万能的npm(你怕吗)。
npm install echarts --save

需要的文件中使用

import echarts from "echarts";
  1. 一切就绪,让我们开始老套路吧
<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
};
  1. 在此基础之上还可以实现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/…