vue中使用echarts，可重绘

vue中使用echarts，可重绘

1. 安装插件echarts

npm install echarts -S

2. echarts组件

/components/XEcharts/echarts.vue

<template>
  <div class="chart" ref="chart"></div>
</template>
<script>
export default {
  name: "XEcharts",
  data() {
    return {
      myChart: null,
    };
  },
  props:["options"],
  watch: {
    options: {
      handler (newValue) {
        this.options = newValue
        this.$nextTick(
          this.resetChartData() //监听到了，重新定义数据，即重绘
        )
      },
      deep: true
    }
  },
  methods: {
    drawMyChart() {
      this.myChart.setOption(this.options);
    },
    resetChartData() {
        this.myChart.clear();
        this.myChart.setOption(this.options);
    },
    resizefun() {
      this.$echarts.init(this.$refs.chart).resize(); //多个echarts则在此处添加
    }
  },
  mounted() {
    this.myChart = this.$echarts.init(this.$refs.chart);
    this.drawMyChart();
    window.onresize = () => this.resizefun;
    window.addEventListener("resize", this.resizefun);
  },
  beforeDestroy() {
    window.removeEventListener("resize", this.resizefun);
    this.resizefun = null;
  },
};
</script>
<style scoped>
.chart {
  width: inherit;
  height: inherit;
}
</style>

/components/XEcharts/index.js

import XEcharts from './XEcharts'
export default function install(Vue, opts) {
    Vue.component(XEcharts.name, XEcharts)
}

3. 引入echarts，在main.js中引入全局注册

import XEcharts from '@/components/XEcharts'
Vue.use(XEcharts)

4. 应用

公共js文件

let commonJSon = {
   // color: ["#0095E5", "#A783E5", "#5AD8A6", "#F9C738", "#EA836B", "#6671EE", "#62D9D3", "#EF9244"],
   color: ["#0095E5", "#A783E5", "#5CA3FB", "#45CBC3 ", "#97C55C", "#29B6F6", "#36C987", "#F27C57", "#FBBC3A", "#D787E6", "#5AD8A6", "#F9C738", "#EA836B", "#6671EE", "#62D9D3", "#EF9244"],
   // color: ["#29B6F6", "#36C987", "#F27C57", "#FBBC3A", "#D787E6", "#A783E5", "#5CA3FB", "#45CBC3", "#97C55C"],
   title: {
      text: "",
      textStyle: {
         fontSize: 16,
         color: "#2E3239",
         fontWeight: 400
      },
      left: "center"
   },
   legend: {
      left: '16',
      textStyle: {
         color: "#86909C"
      },
      width: "auto",
      itemWidth: 10,  // 小方块尺寸
      itemHeight: 10,
   },
   tooltip: {
      textStyle: {
         color: '#8F9195',
         fontSize: 12,

      },
      axisPointer:{
         type:"none"
      },
      trigger: 'axis',
      formatter: params => {
         // 获取xAxis data中的数据
         let dataStr = `<div><p style="margin:0 8px 12px;color:#54575D;">${params[0].name}</p></div>`
         params.forEach(item => {
           dataStr += `<div>
             <div style="margin: 0 8px;">
               <span style="display:inline-block;margin-right:5px;width:10px;height:10px;background-color:${item.color};"></span>
               <span>${item.seriesName}</span>
               <span style="float:right;margin-left:20px;">${item.value}</span>
             </div>
           </div>`
         })
         return dataStr
     },
   borderColor: "#fff",
   }
};
export const echartsJson = {
   bar: {
      grid: {
         left: '20px',
         right: '20px',
         bottom: '40px',
         containLabel: true
      },
      legend: commonJSon.legend,
      tooltip: commonJSon.tooltip,
      color: commonJSon.color,
      title: commonJSon.title,
      barWidth: "20px",
      xAxis: {
         type: 'category',
         data: [],
         axisTick: {
            show: false
         },
         axisLine: {
            lineStyle: {
               color: "rgba(0,0,0,.25)",
            }
         },
         axisLabel: {
            color: "rgba(0,0,0,.45)",
            fontSize: 12
         }
      },
      yAxis: {
         type: 'value',
         splitLine: {
            show: true,
            lineStyle: {
               color: 'rgba(0,0,0,.15)',
               width: 1,
               type: 'solid'
            }
         },
         axisLabel: {
            color: "rgba(0,0,0,.45)",
            fontSize: 12
         }
      },
      series: [
         {
            data: [],
            type: 'bar',
            name: "series",
         }
      ]
   },
   line: {
      // color: ["#0095E5","#62D9AA", "#F7C536", "#E8755A", "#5AD8A6", "#F9C738", "#EA836B", "#6671EE", "#62D9D3", "#EF9244"],
      color: commonJSon.color,
      title: {
         text: "",
         textStyle: {
            fontSize: 16,
            color: "#2E3239",
            fontWeight: 400
         },
         left: "center"
      },
      // tooltip: {
      //    trigger: 'axis'
      // },
      tooltip: commonJSon.tooltip,

      legend: {
         left: '16',
         textStyle: {
            color: "#86909C"
         },
         width: "auto",
         itemWidth: 10,  // 小方块尺寸
         itemHeight: 10,
      },
      grid: {
         left: '3%',
         right: '4%',
     

组件中使用

<x-echarts ref="myCharts1" v-if="chartItem.type=== 'bar'" class="chartMain" :options="barJson"></x-echarts>

<script>
import { echartsJson } from "@/const/echarts/echarts"

export default {
    name: 'wel',
    data() {
      return {
        barJson: deepClone(echartsJson.bar),
      };
    },
methods(){
getBar(data) {
        const subData = {
          analysisDurationType: data || 1,
          excludes: ["4005", "4006", "4009"],
        }
        proof(subData).then(res => {
          const barList = res.data.data;
          this.barJson.series=[];
          const xLine = [];
          const success = [];
          const fail = [];
          barList.forEach(item => {
            xLine.push(item.type);
            success.push({value:item.成功,color:"#29B6F6"});
            fail.push({value:item.失败,color:"#D787E6"});
          });
          this.barJson.xAxis.data = xLine;
            this.barJson.series.push({
              data: success,
              type: 'bar',
              name: "成功",
              stack:"1",
          })  
          this.barJson.series.push({
              data: fail,
              type: 'bar',
              name: "失败",
              stack:"1",
          })
          
        })
      },
},
created() {
      this.getBar();
    },
}