vue echarts的使用

1、子组件

commomEcharts.vue

完整代码

<template>
 <div class="box">
   <!--    子组件需要得到的值  id 和 data-->
   <div  v-bind:id=id  ref="data" style="width:80vw;height:30vh"></div>
 </div>
</template>
<!--开始在js里画图表 -->
<script>
 export default {
   name: "barChart",
   props: ["id", "data"], //接受从父组件传回的值
   data() {
     return {}
   },
   //实时监听父组件传过来的值
   //然后执行drawBar方法 重新绘制柱状图
   watch: {
     data: {
       handler(value) {
         this.drawBar(value)
       },
       deep: true//深度监听
     }
   },
   mounted() {
     this.drawBar(this.data)
   },
   methods: {
     drawBar({
               textTile = '',  // 标题 柱状图options里需要用的数据这里作为参数从data里面取值
               totalText = '',//标签
               xData = [],//x轴的数据
               legendTitle = [],//图例
               series = [],//series的数据
             } = {}  //作为一个整体的参数
     ) {   //现在是真正开始画图表的时候
       let barBox = this.$echarts.init(document.getElementById(this.id));
       //给图表一个指定的容器dom
       let option = { //设置图表的options
         //1.先设置图表的标题
         title: {
           text: textTile,//使用父组件传过来的数据
           textStyle: {
             color: '#7099FF',
             fontsize: 20
           }
         },
       
         //2.直角坐标系绘图区域
         grid: {
           top: '2%',
           left: '0%',
           right: '0%',
           bottom: '15%',
           containLabel: true
         },
         //3.下载切换区域
         toolbox: {
         show: true,
         feature: {
           dataView: { show: true, readOnly: false },
           magicType: { show: true, type: ["line", "bar"] },
           restore: { show: true },
           saveAsImage: { show: true }
         }
       },
       calculable: true,
         tooltip: {
         trigger: "axis"
       },
       legend: {
         icon: "rect", //这个字段控制形状类型包括 circle，rect ，roundRect，triangle，diamond，pin，arrow，none
         itemWidth: 10, //设置宽度
         itemHeight: 10, //设置高度
         itemGap: 40, //设置间距
         bottom: 10,
         left: 'center',
         data: legendTitle
       },
         //4.x轴相关结构
         xAxis:
           {
             type: "category",
             data: xData,
             axisLine: {
               show: true,
                lineStyle: {
               color: "rgba(204,204,204)",
               width: 1,
               type: "solid"
             }
             },
             axisLabel: {
               interval: 0,
               fontSize: 10,
               // rotate: 20
             },
             boundaryGap: true,
             axisTick: {
               alignWithLabel: true
             },
           },
         //5.y轴相关结构
         yAxis:
           {
             type: "value",
             axisLine: {
               show: true,
                lineStyle: {
               color: "rgba(204,204,204)",
               width: 1,
               type: "solid"
             }
             },
             splitLine: {
               show: false
             },
             // boundaryGap: true,
           },
         //6.固定说明文字
         graphic: [{
           type: 'group',
           id: 'textGroup1',
           left: '1%',
           top: '15%',
           // bounding: 'raw',
           children: [
             {
               type: 'text',
               z: 100,
               top: 'middle',
               left: 'center',
               style: {
                 // text: 副标题
                 text: totalText,
                 fontSize: 15,
                 fill: '#A9A9AB',
               }
             }

           ]
         }],
         //7.图表的相关series设置
         series: series,
       };
       //柱状图的相关结构已经定义好了调用setoption
       barBox.setOption(option, true);
       // console.log(option)
       window.addEventListener("resize", function () {
         barBox.resize();
       })
     }
   }
 }
</script>

父组件引用

import BarChart from "@/view/Electricity/components/commomEcharts";

2、父组件

主要代码片段

<template>
  <div class="content_main">
   <!--  调用子组件  对应子组件的id=bar和data=objectData数据绑定-->
      <bar-chart :id="'line1'" :data="objectData"></bar-chart>
      <bar-chart :id="'line2'" :data="objectData1"></bar-chart>
      <bar-chart :id="'line3'" :data="objectData2"></bar-chart>
  </div>
</template>

export default {
  components: { BarChart },
  data() {
    return {
      objectData: {
        series: [],
        legendTitle:['UA','UB','UC'],
        xData: [],
      },
      objectData1: {
        series: [],
        legendTitle:[],
        xData: [],
      },
      objectData2: {
        series: [],
        legendTitle:[],
        xData: [],
      },
    };
  mounted() {
  this.getSeries();
  },
  getSeries() {
      this.objectData.series = [
        {
          name: "UA",
          type: "line",//这里可修改（bar，pie）
          barWidth: "40%", //柱图宽度
          data: ['32', '30', '28', '29', '36', '33', '25'],
          itemStyle: {
            normal: {
              color: "#6994FF",
            },
          },
        },
        {
          name: "UB",
          type: "line",//这里可修改（bar，pie）
          barWidth: "40%", //柱图宽度
   data: ['12', '52', '20', '26', '31', '10', '35'],
          itemStyle: {
            normal: {
              color: "#73DEB3",
            },
          },
        },
        {
          name: "UC",
          type: "line",//这里可修改（bar，pie）
          barWidth: "40%", //柱图宽度
           data: ['9', '12', '25', '36', '41', '20', '30'],
          itemStyle: {
            normal: {
              color: "#EB785D",
            },
          },
        },
      ];
    },
  }

运行结果

image.png

代码需稍微改动，祝好运~~~~~~~~