vue 使用echarts 进行简单封装统一使用

使用echarts

npm install echarts --save || cnpm install echarts --save

定义wkCharts.vue

<template>
  <div :class="className" :style="{ height: height, width: width }" />
</template>

<script>
import echarts from "echarts";
export default {
  props: {
    // class 为 当前图表的唯一标识
    className: {
      type: String,
      default: "chart",
    },
    width: {
      type: String,
      default: "100%",
    },
    height: {
      type: String,
      default: "225px",
    },
    // option 为图表数据 包括呈现的方式 数据
    optionData: {},
  },
  data() {
    return {
      chart: null,
    };
  },
  // 监听数据变化 进行试试刷新
  watch: {
    "optionData.count"(n, m) {
      this.chart.setOption(this.optionData);
    },
  },
  mounted() {
    // 防止未加载完毕 报错
    this.$nextTick(() => {
      this.initChart();
    });
  },
  // 关闭 及 删除图表
  beforeDestroy() {
    if (!this.chart) {
      return;
    }
    this.chart.dispose();
    this.chart = null;
  },
  methods: {
    initChart() {
      this.chart = echarts.init(this.$el, "macarons");
      this.chart.setOption(this.optionData);
      window.addEventListener("resize", this.chart.resize);
    },
  },
};
</script>

页面内使用

<template>
  <div class="contentr">
    <wkCharts className="echary" :optionData="option"></wkCharts>
  </div>
</template>

<script>
import wkChart from '@/components/wkCharts'

export default {
  name: "dataEcharts",
  data() {
    return {
      option: {}
    }
  },
  components: {
    wkCharts
  },
  created () {
  },
  async mounted() {

    this.option = {
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'cross',
          crossStyle: {
              color: '#999'
          }
        }
      },
　　　　// 工具栏
      toolbox: {
        feature: {
          // 显示表格数据
          dataView: {show: true, readOnly: false},
         // 切换为 k线图 或柱形图
          magicType: {show: true, type: ['line', 'bar']},
　　　　　　// 刷新
          restore: {show: true},
          // 保存为本地图片
          saveAsImage: {show: true}
        }
      },
      // 说明 数据与 series 的name值对应 才会显示
      legend: {
        data: ['蒸发量', '降水量', '温度', '光照', '平均温度']
      },
      xAxis: [
       // 设置x轴底部显示的标题数据 及样式
        {
          type: 'category',
          data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月'],
          axisPointer: {
              type: 'shadow'
          },
          axisLine: {
            lineStyle: {
              color: 'red'
            }
          }
        }
      ],
      yAxis: [
       // 显示样式设置  此处显示两个 y轴  看个人需求 是一个就写一个
        {
          type: 'value',
          name: '水量',
          min: 0,
          max: 250,
          interval: 50,
          axisLabel: {
              formatter: '{value} ml'
          },
          axisLine: {
            lineStyle: {
              color: 'red'
            }
          }
        },
        {
          type: 'value',
          name: '温度',
          min: 0,
          max: 25,
          interval: 5,
          axisLabel: {
              formatter: '{value} °C'
          },
          axisLine: {
            lineStyle: {
              color: 'blue'
            }
          }
        }
      ],
      series: [
          // bar 为柱形图 一个隔断 分为四个柱形  外加一个line K线图  数据全放在series
          {
            name: '蒸发量',
            type: 'bar',
            data: [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0],
            color: 'red',
            itemStyle: {
              normal: {
                                label: {
                                    show: false, //开启显示数据图上的数值
                                    position: 'top', //在上方显示
                                    textStyle: { //数值样式
                                        color: 'red',
                                        fontSize: 12
                                    }
                                }
                            }
            }
          },
          {
            name: '降雨量',
            type: 'bar',
            data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8],
            color: 'pink',
            itemStyle: {
              normal: {
                                label: {
                                    show: false, //开启显示数据图上的数值
                                    position: 'top', //在上方显示
                                    textStyle: { //数值样式
                                        color: 'pink',
                                        fontSize: 12
                                    }
                                }
                            }
            }
          },
          {
            name: '温度',
            type: 'bar',
            data: [2.6, 2.9, 1.0,26.4, 28.7, 70.7, 15.6, 12.2, 2.7, 38.8],
            color: 'blue',
            itemStyle: {
              normal: {
                                label: {
                                    show: false, //开启显示数据图上的数值
                                    position: 'top', //在上方显示
                                    textStyle: { //数值样式
                                        color: 'blue',
                                        fontSize: 12
                                    }
                                }
                            }
            }
          },
          {
            name: '光照',
            type: 'bar',
            data: [2.6, 5.9, 9.0, 26.4, 28.7, 20.7, 11.6, 112.2, 48.7, 18.8],
            itemStyle: {
              normal: {
                                label: {
                                    show: false, //开启显示数据图上的数值
                                    position: 'top', //在上方显示
                                    textStyle: { //数值样式
                                        color: 'black',
                                        fontSize: 12
                                    }
                                }
                            }
            }
          },
          {
            name: '平均温度',
            type: 'line',
            yAxisIndex: 0,
            data: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 10],
            color: 'rgb(64, 158, 255)',
            itemStyle: {
              normal: {
                                label: {
                                    show: false, //开启显示数据图上文字
                                    position: 'top', //在上方显示
                                    textStyle: { //数值样式
                                        color: 'rgb(64, 158, 255)',
                                        fontSize: 12
                                    }
                                }
                            }
            }
          }
      ]
    }
    // 测试 实时刷新数据
    let count = 0
    setInterval(() => {
      let option = this.option
      if (option.count) {
        option.count = count++
      } else {
        this.$set(option, 'count', count++)
      }
      let num = Math.round(Math.random()*220)
      option.xAxis[0].data.shift()
      option.xAxis[0].data.push(Math.round(Math.random()*11)+ '月')
      option.series[0].data.shift()
      option.series[0].data.push(num)
      option.series[1].data.shift()
      option.series[1].data.push(num + 11)
      option.series[2].data.shift()
      option.series[2].data.push(num - 21)
      option.series[3].data.shift()
      option.series[3].data.push(num - 12)
      option.series[4].data.shift()
      option.series[4].data.push(num)
      this.option = JSON.parse(JSON.stringify(option))
    }, 2000)
  },
  methods: {
  }
}
</script>

<style lang="scss" scoped>
</style>