vue使用echarts绘制柱状图与扇形图

界面效果

下载以及引入

npm install echarts -S

在main.js中引入echarts
import echarts from ‘echarts’
Vue.prototype.$echarts = echarts
创建板块

   <div class="echartsLeft1 echart">
    <div
      class="HelloWorld echart-box"
      id="myChart1"
    ></div>
     </div>

定义方法

 data() {
    return {
     
      // 定义图表，各种参数
      msg: "柱状图",
      //左边第一个前五名柱状表格需要的数据
       datass: [
        {
          value:1,//打卡次数
          name:"黄",//姓名
        },
        {
          value:2,
          name:"童"
        },
        {
          value:3,
          name:"李"
        },
        {
          value:4,
          name:"吴"
        },
        {
          value:5,
          name:"张"
        }
        ],
        //myChart1是前五名的打卡次数，柱状图需要将数据拆开之后分别放到两个数组中
        myChart1:[],
        //前五名的名字
        name:[],
        index:0,
        }，
        mounted: function () {
    //模拟拿到了左边第一个柱状图数据datass，并且进行分离
    this.datass.forEach(item =>{
        console.log(item.name,item.value);
        this.myChart1[this.index]=item.value,
        this.name[this.index]=item.name
        this.index++
        });
        console.log(this.myChart1,this.name);
        this.drawLine(); //按照默认值绘制图表
        }，
         watch: {
    //左边第一个柱状图的要求
    myChart1: {
      //对于深层对象的属性，watch不可达，因此对数组监控需要将数组先清空，再添加数据
      handler: function () {
        this.drawLine();
      },
      deep: true,
    }
    }，
      methods: {
         //打卡次数前五名
    drawLine() {
      // 1、基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById("myChart1"));
      //2、构造图表数据
      let options = {
        title: {
          text: "打卡次数前五名",
          left: "center",
          tooltip: {},
        },
        xAxis: {
          data:this.name
        },
        yAxis: {},
        series: [
          {
            name: "姓名",
            data: this.myChart1,
            type: "bar",
            itemStyle: {
                   normal: {
                       label: {
                           show: true,		//开启显示
                           position: 'top',	//在上方显示
                           textStyle: {	    //数值样式
                               color: 'black',
                               fontSize: 10
                           }
                       }
                   }
               }
          },
        ],
      };
      // 3、绘制图表
      myChart.setOption(options);
    }
      }

以上是第一个柱状图的定义与参数，总结就是先绘制div表格在template里面，之后定义数据，然后在watch里面进行深度监视，监视数据变化，在mounted拆分数组分到两个数组中，之后调用this.drawLine();绘制图形，再到methods里面定义方法

之后三个也是类似的，主要注意点就是有时候数据更新了表格却检测不到

数据更新表格却不会重绘制？？

已经检测到数据更新，但是watch里面也有深度监视，但表格就是不会重新绘制
此时可以使用重新调用表格的方法this.drawLine()重新绘制图形,就是在数据更新后调用这个函数，便可以解决表格无法重绘的问题
例如

//拿到更新后的左边第一个柱状图数据datass，并且进行分离
    this.datass.forEach(item =>{
        console.log(item.name,item.value);
        this.myChart1[this.index]=item.value,
        this.name[this.index]=item.name
        this.index++
        });
        //再次调用函数
        this.drawLine()
        console.log(this.myChart1,this.name);

完整代码

<template>
 <div>
     <!-- 统计打卡次数最多的五个人 -->
    <div class="echartsLeft1 echart">
    <div
      class="HelloWorld echart-box"
      id="myChart1"
    ></div>
     </div>
   <!-- 软件组与硬件组的数据对比 -->
      <div class="echartsRighht1 echart">
    <div
      class="HelloWorld echart-box"
      id="myChart2"
    ></div>
      </div>
      <!-- 统计打卡次数最少的五个人 -->
    <div class="echartsLeft2 echart">
    <div
      class="HelloWorld echart-box"
      id="myChart12"
    ></div>
     </div>
     <!-- 统计各方向的打卡次数 -->
    <div class="echartsRighht2 echart">
    <div
      class="HelloWorld echart-box"
      id="myChart22"
    ></div>
      </div>
 </div>
</template>

<script>
var that = this;
import axios from 'axios'
 export default {
   data() {
    return {
     
      // 定义图表，各种参数
      msg: "柱状图",
      //左边第一个前五名柱状表格需要的数据
       datass: [
        {
          value:1,//打卡次数
          name:"黄",//姓名
        },
        {
          value:2,
          name:"童"
        },
        {
          value:3,
          name:"李"
        },
        {
          value:4,
          name:"吴"
        },
        {
          value:5,
          name:"张"
        }
        ],
        //myChart1是前五名的打卡次数
        myChart1:[],
        //前五名的名字
        name:[],
        index:0,
        //左边第二个后五名柱状图的数据
         myChart12datas: [
        {
          value:10,//打卡次数
          name:"bb",//姓名
        },
        {
          value:29,
          name:"cc"
        },
        {
          value:32,
          name:"fdf"
        },
        {
          value:3,
          name:"rr"
        },
        {
          value:53,
          name:"ss"
        }
        ],
        //后5名的打卡次数
        myChart12data:[],
        //后5名的名字
        myChart12name:[],
        //右边边第一个扇形表格需要的数据
        myChart2:[],
        //group
        group:[],
      //右边扇形统计图打卡次数
      // 定义图表，各种参数
      msg: "扇形图",
      myChart2: [
         { value: 64, name: "软件组" },
        { value: 32, name: "硬件组" },
      ],
      //右边第二个扇形图，各方向数据
      myChart22:[ 
         { value: 12, name: "前端开发" },
        { value:22, name: "后端开发" },
        { value:5, name: "小程序" },
        { value:12, name: "UI设计" },
        { value:22, name: "深度学习" },
        { value:10, name: "安卓开发" },
        { value:11, name: "水下机器人" },
        { value:13, name: "养殖机器人" },
        { value:22, name: "SLAM导航" },
        { value: 21, name: "机械臂" },
        ],
         //右边第二个扇形图的各方向内容
      direction:[],
    };
     
  },
  mounted: function () {
    //模拟拿到了左边第一个柱状图数据datass，并且进行分离
    this.datass.forEach(item =>{
        console.log(item.name,item.value);
        this.myChart1[this.index]=item.value,
        this.name[this.index]=item.name
        this.index++
        });
        console.log(this.myChart1,this.name);
        //模拟拿到了左边第二个柱状图数据datass，并且进行分离
        let lastnum=0
        this.myChart12datas.forEach(item =>{
        console.log(item.name,item.value);
        this.myChart12data[lastnum]=item.value,
        this.myChart12name[lastnum]=item.name
        lastnum++
        });
        console.log(this.myChart12data,this.myChart12name);
    //模拟拿到了右边第一个软硬件打卡myChart2扇形图的数据，并且进行分离
    let num=0
    this.myChart2.forEach(item =>{
        console.log(item.name,item.value);
        this.group[num]=item.name
        num++
        });
        console.log(this.group);
    //模拟拿到了右边第二个各方向打卡myChart22扇形图的数据，并且进行分离
     let directionnum=0
    this.myChart22.forEach(item =>{
        console.log(item.name,item.value);
        this.direction[directionnum]=item.name
        directionnum++
        });
        console.log(this.direction);
    this.drawLine(); //按照默认值绘制图表
    this.drawLine2(); //按照默认值绘制图表
    this.drawLine3(); //按照默认值绘制图表
    this.drawLine4(); //按照默认值绘制图表
  },
  
  
//   created() {
//     axios.get("findPatientAge").then((response) => {
//       console.log(response);
//       if (response.data.statusCode == 200) {
//         this.myChart1.length = 0; //清空数组
//         for (let i = 0; i < response.data.data.length; i++) {
//           this.myChart1.push(response.data.data[i]);
//         }
//         console.log(this.myChart1);
//       }
//     });
//   },
  watch: {
    //左边第一个柱状图的要求
    myChart1: {
      //对于深层对象的属性，watch不可达，因此对数组监控需要将数组先清空，再添加数据
      handler: function () {
        this.drawLine();
      },
      deep: true,
    },
    //右边第一个扇形图的要求
    myChart2: {
      //对于深层对象的属性，watch不可达，因此对数组监控需要将数组先清空，再添加数据
      handler: function () {
        this.drawLine2();
      },
      deep: true,
    },
    //左边第二个柱状图的要求
    myChart12: {
      //对于深层对象的属性，watch不可达，因此对数组监控需要将数组先清空，再添加数据
      handler: function () {
        this.drawLine3();
      },
      deep: true,
    },
    //左边第二个扇形图的要求
    myChart22: {
      //对于深层对象的属性，watch不可达，因此对数组监控需要将数组先清空，再添加数据
      handler: function () {
        this.drawLine4();
      },
      deep: true,
    },
  },
  methods: {
    //各方向打卡次数
     drawLine4() {
      // 1、基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById("myChart22"));
      //2、构造图表数据
      let options = {
        title: {
          text: "各方向打卡次数",
          left: "center",
        },
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b} : {c} ({d}%)",
        },
        legend: {
          orient: "vertical",
          left: "left",
          data: this.direction,
        },
        series: [
          {
            name: "访问来源",
            type: "pie",
            radius: "55%",
            center: ["50%", "60%"],
            data: this.myChart22,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
          },
        ],
      };
      // 3、绘制图表
      myChart.setOption(options);
    },
    //打卡次数后五名
     drawLine3() {
      // 1、基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById("myChart12"));
      //2、构造图表数据
      let options = {
        title: {
          text: "打卡次数后五名",
          left: "center",
          tooltip: {},
        },
        xAxis: {
           data:this.myChart12name
        },
        yAxis: {},
        series: [
          {
            name: "姓名",
            data: this.myChart12data,
            type: "bar",
            itemStyle: {
                   normal: {
                       label: {
                           show: true,		//开启显示
                           position: 'top',	//在上方显示
                           textStyle: {	    //数值样式
                               color: 'black',
                               fontSize: 10
                           }
                       }
                   }
               }
          },
        ],
      };
      // 3、绘制图表
      myChart.setOption(options);
    },
    //软/硬件组打卡次数
     drawLine2() {
      // 1、基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById("myChart2"));
      //2、构造图表数据
      let options = {
        title: {
          text: "软/硬件组打卡次数",
          left: "center",
        },
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b} : {c} ({d}%)",
        },
        legend: {
          orient: "vertical",
          left: "left",
          data: this.group,
        },
        series: [
          {
            name: "访问来源",
            type: "pie",
            radius: "55%",
            center: ["50%", "50%"],
            data: this.myChart2,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
          },
        ],
      };
      // 3、绘制图表
      myChart.setOption(options);
    },
    //打卡次数前五名
    drawLine() {
      // 1、基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById("myChart1"));
      //2、构造图表数据
      let options = {
        title: {
          text: "打卡次数前五名",
          left: "center",
          tooltip: {},
        },
        xAxis: {
          data:this.name
        },
        yAxis: {},
        series: [
          {
            name: "姓名",
            data: this.myChart1,
            type: "bar",
            itemStyle: {
                   normal: {
                       label: {
                           show: true,		//开启显示
                           position: 'top',	//在上方显示
                           textStyle: {	    //数值样式
                               color: 'black',
                               fontSize: 10
                           }
                       }
                   }
               }
          },
        ],
      };
      // 3、绘制图表
      myChart.setOption(options);
    },
  },
 }
</script>

<style>
.echart-box{
    width: 35vw;
    height: 38vh;
}
.echart{
    margin-top: 10px;
    float: left;
    width: 35vw;
    height:38vh;
}
#myChart12,#myChart22{
    /* background-color: black; */
    margin-top: 20px;
}
#myChart2,#myChart22{
    /* background-color: black; */
    margin-left: 100px;
}
 /* 匹配手机端 */
    @media only screen and (max-width:600px){
    .echart{
    width:90vw;
    height: 45vh;
    margin: 0;
    margin-bottom:100px;
    }
    .echart-box{
    width: 90vw;
    height: 45vh;
    /* background-color: black; */
    
}
#myChart12,#myChart22{
    /* background-color: black; */
    margin-top: 0px;
}
  #myChart2,#myChart22{
    /* background-color: black; */
    margin-left: 0px;
}
}
</style>