当，Vue遇上ECharts-阿里云开发者社区

当，Vue遇上ECharts

2022-04-28 257

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 当Vue遇上ECharts

过当爱情遇上美，那么一切便啥都好说。

当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();