echarts 进行二次封装基于VUE(2.0)

1.首先安装 npm install echarts --save

2. 在main.js引入

// 引入echarts
import echarts from 'echarts'
// 一般都要加个$加到vue的原型链上，方便引用
Vue.prototype.$echarts = echarts

3. 封装代码在scr/components中新建ECharts文件夹与ECharts.vue文件

4. ECharts.vue 封装文件代码如下

<template>
  <div ref="echart"></div>
  <!-- 使用方法=>需要引入当前组件 -->
</template>

<script>
import echarts from "echarts";

export default {
  props: {
    isAxisChart: {
      //注意饼图和y轴排放 需要传递 :isAxisChart="饼图是2  柱状y轴排放是1"
      type: Number,
      default: 0,
    },
    chartData: {
      //折线、柱状图
      type: Object,
      default() {
        return {
          xData: [],
          series: [],
        };
      },
    },
  },
  watch: {
    chartData: {
      handler: function () {
        this.initChart();
      },
      deep: true,
    },
  },
  methods: {
    initChart() {
      this.initChartData();
      if (this.echart) {  //判断渲染
        this.echart.setOption(this.options);
      } else {
        this.echart = echarts.init(this.$refs.echart);
        this.echart.setOption(this.options);
      }
    },
    initChartData() {
      if (this.isAxisChart == 0) {
        //拆线图或者柱状图
        this.axisOption.xAxis.data = this.chartData.xData;
        this.axisOption.series = this.chartData.series;
      } else if (this.isAxisChart == 1) {
        // y轴排放 拆线图或者柱状图
        this.yaxisOption.yAxis.data = this.chartData.xData;
        this.yaxisOption.series = this.chartData.series;
      } else {
        //饼图
        // console.log(555, this.chartData.series)
        this.normalOption.series = this.chartData.series;
      }
    },
  },
  data() {
    return {
      //折线、柱状图
      axisOption: {
        legend: {
          data: ["", ""],
        },
        grid: {
          x: 50, //控制x轴文字与底部的距离
          y2: 100, // y2可以控制倾斜的文字狱最右边的距离，放置倾斜的文字超过显示区域
        },
        // 提示框
        tooltip: {
          trigger: "axis",
        },
        toolbox: {
          show: true,
          feature: {
            // dataView: { show: true, readOnly: false }, 文本形式
            magicType: { show: true, type: ["line", "bar"] }, //切换形态
            restore: { show: true }, //还原形态
            saveAsImage: { show: true }, //下载功能
          },
        },
        calculable: true,
        xAxis: {
          type: "category", // x类目轴
          data: [],
            axisLine: {
              lineStyle: {
                color: "#333333", //x类目轴颜色
              },
            },
          axisLabel: {
            interval: 0, //强制文字产生间隔
            rotate: 45, //文字逆时针旋转45°
            textStyle: {
              //文字样式
              fontSize: 13,
              fontFamily: "Microsoft YaHei",
            },
          },
        },
        yAxis: [
          {
            type: "value",
            axisLine: {
              lineStyle: {
                color: "#333333", //y类目轴颜色
              },
            },
          },
        ],
        // color: [
        //   "#2ec7c9",
        //   "#b6a2de",
        //   "#5ab1ef",
        //   "#ffb980",
        //   "#d87a80",
        //   "#8d98b3",
        // ],
        series: [],
      },

      //y轴排放折线、柱状图
      yaxisOption: {
        title: {
          text: "World Population",
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        legend: {},
        grid: { // 控制图的大小，调整下面这些值就可以，
	        	x: 120,//控制x轴文字与底部的距离
            // y2: 100 // y2可以控制倾斜的文字狱最右边的距离，放置倾斜的文字超过显示区域
	    	},
        xAxis: {
          type: "value",
          boundaryGap: [0, 0.01],
        },
        yAxis: {
          type: "category",
          inverse: true, //设置倒序排序
          axisLabel:{
               textStyle: {    //文字样式
					        fontSize: 14,
					        fontFamily: 'Microsoft YaHei'
					    }
          },
          data: [],
        },
        series: [],
      },

      //饼图
      normalOption: {
        {
          top: 'bottom'
        },
        tooltip: {
          trigger: "item",
        },
        color: [
          "#0f78f4",
          "#dd536b",
          "#9462e5",
          "#a6a6a6",
          "#e1bb22",
          "#39c362",
          "#3ed1cf",
        ],
        series: [],
      },
      // 给个初始值null不然会报错
      echart: null,
    };
  },
  computed: {
    options() {
      if (this.isAxisChart == 0) {
        return this.axisOption;
      } else if (this.isAxisChart == 1) {
        return this.yaxisOption;
      } else {
        return this.normalOption;
      }
    },
  },
};
</script>

5.使用流程

<template>
  <div style="background:white">
        
                <div style="display:flex">
                   <div>
                       <echart
                        style="height: 300px; width:500px"
                        :chartData="echartData.user1"
                      />
                   </div>
                   <div>
                      <echart
                        style="height: 300px; width:500px"
                        :chartData="echartData.order"
                      />
                   </div>
                </div>
                

                <div style="display:flex">
                   <div>
                      <echart
                        style="height: 500px; width:500px"
                        :chartData="echartData.video"
                        :isAxisChart="2"
                      />
                   </div>
                   <div>
                      <echart
                        style="height: 500px; width:600px"
                        :chartData="echartData.user"
                        :isAxisChart="1"
                      />
                   </div>
                </div>
               
        

  </div>
</template>
<script>
import {
  selectbatchnumfordeptyc,
  selectbatchnumfordeptqs,
} from "@/api/statistics";
import { selectAll } from "@/api/settings";
import Echart from "../../../components/ECharts/ECharts.vue";
export default {
  components: { Echart },
  data() {
    return {
      echartData: {
        order: { //代表折线
          xData: [],
          series: [],
        },
        user: { //user代表柱状
          xData: [],
          series: [],
        },
        user1: { //user代表柱状
          xData: [],
          series: [],
        },
        video: {  //代表饼图
          series: [],
        },
      },
    };
  },
  created() {},
  mounted() {
     this.initData()
  },
  methods: {
     initData(){
        //柱状
        this.echartData.user1.xData =  ["1","2","3","4","5"]
        this.echartData.user1.series =  [
          {
            name: "外资",
            barWidth: 25,//柱状大小
            color: "#ee6666",
            type: "bar",
            data: [10,20,30,40,50],
            itemStyle:{
							normal: {
								label: {
									show: true, //开启显示
									position: 'top', //在上方显示
									textStyle: { //数值样式
										color: '#ee6666',
										fontSize: 14,
									}
								}
							}
						},
          },
        ]


        //拆线
        this.echartData.order.xData =  ["1","2","3","4","5"]
        this.echartData.order.series =  [
          {
            name: "外资",
            barWidth: 25,//柱状大小
            color: "#ee6666",
            type: "line",
            data: [10,20,5,10,35],
            itemStyle:{
							normal: {
								label: {
									show: true, //开启显示
									position: 'top', //在上方显示
									textStyle: { //数值样式
										color: '#ee6666',
										fontSize: 14,
									}
								}
							}
						},
          },
        ]

        //饼图
        this.echartData.video.series =  [
             {
               name: 'Nightingale Chart',
               type: 'pie',
               radius: [50, 150],
               center: ['50%', '50%'],
               roseType: 'area',
               itemStyle: {
                 borderRadius: 8
               },
               data: [
                 { value: 40, name: 'rose 1' },
                 { value: 38, name: 'rose 2' },
                 { value: 32, name: 'rose 3' },
                 { value: 30, name: 'rose 4' },
                 { value: 28, name: 'rose 5' },
                 { value: 26, name: 'rose 6' },
               ]
             }
       ]
       //柱状y轴
        this.echartData.user.xData =  ["1","2","3","4","5"]
        this.echartData.user.series =  [
          {
            name: "外资",
            barWidth: 25,//柱状大小
            color: "#ee6666",
            type: "bar",
            data: [10,20,30,40,50],
            itemStyle:{
							normal: {
								label: {
									show: true, //开启显示
									position: 'top', //在上方显示
									textStyle: { //数值样式
										color: '#ee6666',
										fontSize: 14,
									}
								}
							}
						},
          },
           {
            name: "内资",
            barWidth: 25,//柱状大小
            color: "#ddac1d",
            type: "bar",
            data: [10,20,30,40,50],
            itemStyle:{
							normal: {
								label: {
									show: true, //开启显示
									position: 'top', //在上方显示
									textStyle: { //数值样式
										color: '#ee6666',
										fontSize: 14,
									}
								}
							}
						},
          },
        ]
     }
  },
};
</script>
<style>

</style>

 效果图如下：

//仅供参考,如有雷同,纯属虚构