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: "350px"
    },
    // option 为图表数据 包括呈现的方式 数据
    optionData: {}
  },
  data() {
    return {
      chart: null,
      getData: {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            crossStyle: {
              color: '#000'
            }
          }
        },
        grid: {
          left: '2%',
          right: '2%',
          bottom: '3%',
          top: '10%',
          containLabel: true
        },
        legend: {},
        xAxis: [
          {
            type: 'category',
            data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
            axisPointer: {
              type: 'shadow'
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
            name: ' ',
            min: 0,
            axisLabel: {
                formatter: '{value} '
            }
          },
        ],
        series: []
      }
    }
  },
  // 监听数据变化 进行试试刷新
  watch: {
    optionData (n) {
      if (n) {
        this.$nextTick(() => {
          this.chart.setOption(this.optionData, true) //设置为true时不会合并数据，而是重新刷新数据
        })
      }
    }
  },
  mounted() {
    // 防止未加载完毕 报错
    this.$nextTick(() => {
      this.chart = echarts.init(this.$el, "macarons")
      this.chart.setOption(this.getData)
    });
  },
  // 关闭 及 删除图表
  beforeDestroy() {
    if (!this.chart) {
      return;
    }
    this.chart.dispose();
    this.chart = null;
  },
  methods: {
  }
};
</script>

 

页面内使用 

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

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

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

      let dataName = ['数量', '占比', '同比', '环比']

      let option = JSON.parse(JSON.stringify(this.$refs.echary.getData)) 

      option.legend.data = dataName

      option.grid.top = '15%'

      option.xAxis[0].data = ['一甲医院', '二甲医院', '三甲医院', '社区医院', '私人医院', '诊所', '美容诊所', '门店', '名宿', '体检机构', '整形医院', '基因检测']

      let series = []

      dataName.map(res => {

        if (res !== '数量') {

          series.push({name: res, type: 'line', data: [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0]})

        } else {

          series.push({name: res, type: 'bar', data: [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0]})

        }

      })

      option.series = series

      this.option = JSON.parse(JSON.stringify(option))

   // 示例数据
   let optionData = {
      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',
            stack: '同', // 相同名称 数据出现在同一根柱形图上 呈现方式为上下呈现
            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
                                    }
                                }
                            }
            }
          }
      ]
    }
  },
  methods: {

  }
}
</script>

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

 

简单做个记录  官方文档：https://echarts.apache.org/examples/zh/index.html