双向绑定的echarts

echarts图形根据数据变化而变化

1.封装 ecahrts-view组件

<!--
    图表
    @params: width 宽度
    @params: height 高度
    @params: autoResize 是否自动调整大小
    @params: chartOption 图表的配置
-->
<template>
    <div class="chart">
        <div ref="chart" :style="{ height: height, width: width }" />
    </div>
</template>
<script>
// 引入 echarts 核心模块，核心模块提供了 echarts 使用必须要的接口。
import echarts from 'echarts'
export default {
    name: 'ChartView',
    props: {
        width: {
            type: String,
            default: '100%',
        },
        height: {
            type: String,
            default: '100%',
        },
        autoResize: {
            type: Boolean,
            default: true,
        },
        chartOption: {
            type: Object,
            required: true,
        },
        type: {
            type: String,
            default: 'canvas',
        },
    },
    data() {
        return {
            chart: null,
        }
    },
    watch: {
        chartOption: {
            deep: true,
            handler(newVal) {
                this.setOptions(newVal)
            },
        },
    },
    created() {
    },
    mounted() {
        this.initChart()
        if (this.autoResize) {
            window.addEventListener('resize', this.resizeHandler)
        }
    },
    beforeDestroy() {
        if (!this.chart) {
            return
        }
        if (this.autoResize) {
            window.removeEventListener('resize', this.resizeHandler)
        }
        this.chart.dispose()
        this.chart = null
    },
    methods: {
        resizeHandler() {
            this.chart.resize()
        },
        initChart() {
            this.chart = echarts.init(this.$refs.chart, '', {
                renderer: this.type,
            })
            this.chart.setOption(this.chartOption)
            this.chart.on('click', this.handleClick)
        },
        handleClick(params) {
            this.$emit('click', params)
        },
        setOptions(option) {
            this.clearChart()
            this.resizeHandler()
            if (this.chart) {
                this.chart.setOption(option)
            }
        },
        refresh() {
            this.setOptions(this.chartOption)
        },
        clearChart() {
            this.chart && this.chart.clear()
        },
    },
}
</script>
<style scoped lang="scss"></style>

2.main.js导入注册

import ChartPanel from '@components/echarts/index.vue' // echarts组件
Vue.component(ChartPanel.name, ChartPanel)

3.文件目录构成

4.echarts/index.js

const modulesFiles = require.context('./options', true, /index.js$/)
//接受三个参数（require.context(directory,useSubdirectories,regExp)）
//directory：说明需要检索的目录
//useSubdirectories：是否检索子目录
//regExp: 匹配文件的正则表达式,一般是文件名
let modules = {}
modulesFiles.keys().forEach(item => {
    modules = Object.assign({}, modules, modulesFiles(item).default)
})
export default modules

5.导入注册

import eChartFn from '@components/echarts/index.js' // echarts封装的options函数
Vue.prototype.$eChartFn = eChartFn

6.例如双柱形图

echarts/options/systemRun/index.js

// 分车流量及收入情况
import echarts from 'echarts'
const systemRun = function(datas, everyDay) {
  var oldOutData = datas.md_system
  var newOutData = datas.audit_system

  const defaultConfig = {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow', // 默认为直线，可选为：'line' | 'shadow'
      },
    },
    grid: {
      left: '2%',
      //   right: '2%',
      bottom: '14%',
      top: '16%',
      containLabel: true,
    },
    legend: {
      data: ['柱形1', '柱形2'],
      // x:'right',      //可设定图例在左、右、居中
      y: '90%', //可设定图例在上、下、居中
      x:'40%',
      textStyle: {
        color: '#000',
        fontSize: 14,
        fontWeight: 600,
      },
      itemWidth: 18,
      itemHeight: 18,
      // itemGap: 35
    },
    xAxis: {
      type: 'category',
      data: everyDay,
      axisLine: {
        show: false, //不显示坐标轴轴线
      },
      axisTick: {
        show: false, //不显示坐标轴刻度
      },
      axisLabel: {
        interval: 0,
        rotate: 40,
        textStyle: {
          fontFamily: 'Microsoft YaHei',
          fontSize: 14,
          fontWeight: 700,
          color: '#59585D',
        },
      },
    },

    yAxis: [
      {
        type: 'value',
        nameTextStyle: {
          color: '#000',
          fontSize: 14,
          fontWeight: '600',
          // padding: [0, -1700, 0, 1000], // 四个数字分别为上右下左与原位置距离
        },

        splitLine: {
          show: false,
          lineStyle: {
            color: '#999999',
            type: 'dashed',
          },
        },
        axisTick: {
          show: false,
        },
        axisLine: {
          show: false,
          lineStyle: {
            color: '#999999',
          },
        },
        axisLabel: {
          show: true,
          textStyle: {
            fontSize: 14,
            fontWeight: 700,
            color: '#585B73',
          },
        },
      },
    ],
    series: [
      {
        name: '柱形1',
        type: 'bar',
        barWidth: '20%',
        itemStyle: {
          normal: {
            color: '#4F81BD',
            barBorderRadius: 2,
          },
        },

        data: oldOutData,
      },
      {
        name: '柱形2',
        type: 'bar',
        barWidth: '20%',
        itemStyle: {
          normal: {
            color: '#C0504D',
            barBorderRadius: 2,
          },
        },
        data: newOutData,
      },
    ],
  }
  const opt = Object.assign({}, defaultConfig)
  return opt
}

export default {
  systemRun,
}

最终调用：

data:{
   chartSystemOpt: {},
},
created(){
	this.chartSystemOpt = this.$eChartFn.systemRun(this.incomeDataVal, this.everyDay);
},

<div class="echarts">
		<chart-view
			class="echart-zzt"
			height="500px"
			width="110%"
			:chart-option="chartSystemOpt"
			:auto-resize="true"
			/>
</div>