vue中 Echarts之柱状图、饼状图、曲线图（x轴缩放）

安装

cnpm i  echarts
import echarts from "echarts" //如果报错 改 import * as echarts from ‘echarts’;
Vue.prototype.$echarts = echarts

• 1 柱状图

* 参数解释
//1 ID名
//2 柱状图标题
//3 x轴描述
//4 y轴数据
//5 y轴最大刻度
  drawBar(sysDiv, textTitle, xData, yData, maxYNum) {
      let myBarChart = this.$echarts.init(document.getElementById(sysDiv));
      myBarChart.setOption({
        title: {
          text: textTitle,
          textStyle: {
            fontSize: 18,
            fontFamily: "Microsoft YaHei",
            fontWeight: "bold",
          },
        },
        tooltip: {},
        xAxis: {
          data: xData,
        },
        yAxis: {
          min: 0,
          max: maxYNum,
          name: "xxx",
        },
        series: [
          {
            name: "xxx",
            type: "bar",
            data: yData,
            itemStyle: {
              normal: {
                // color: barColor, //同一颜色
                //不同柱子不同颜色
                color: function (params) {
                  var colorList = ["#EA7B12", "#009B7C", "#F4C024", "#546fc6"];
                  return colorList[params.dataIndex];
                },
                label: {
                  //数字显示柱子上方 ---------二选一
                  show: true,
                  position: "top",
                  textStyle: {
                    fontSize: 12,
                    fontFamily: "Microsoft YaHei",
                    color: "#000000",
                  },
                  //数量显示在柱子里面 -------二选一
                   formatter: (params) => { 
                      return '{a|' + params.data+ '}' 
                    },
                    rich: {
                      a: {
                        color: '#fff',
                        fontSize: 20
                      },
                    },
                },
              },
            },
            barWidth: 32,
          },
        ],
      });
    },

• 2 饼状图

//参数就是数据
* 格式:
 const pieArray = [
          { value: 0, name: "名称1" },
          { value: 0, name: "名称2" },
          { value: 0, name: "名称3" },
          { value: 0, name: "名称4" },
        ];
        
  drawPie(sData) {
      let myPieChart = this.$echarts.init(
        document.getElementById("xxx")
      );
       const list = sData; //为了计算图例的百分比而添加的变量
      myPieChart.setOption({
        title: {
          text: "",
        },
        //自定义不同区域颜色 和数据是一一对应
        color: ["#EA7B12", "#009B7C", "#F4C024", "#546fc6"],
        tooltip: {},
        tooltip: {
          trigger: "item",
          formatter: "{b}: {c}个 ({d}%)",
          extraCssText:'z-index:10',//设置级别 ，默认级别是9999999
        },
        legend: {
          top: "30%",
          right: "10%",
          orient: "vertical",
          itemGap: 10, //图例之间间距
          formatter: function (name) {
            //该函数用于设置图例显示后的百分比
            var data = list;
            var total = 0;
            var value;
            list.forEach((item) => {
              total += item.value;
              if (item.name == name) {
                value = item.value;
              }
            });
           // var p = Math.round((value / total) * 100); //求出百分比 四舍五入的最近整数
            var p = ((value / total) * 100).toFixed(2); //求出百分比 保留两位整数
            return `${name}       ${p}%`;
          },
        },
        series: [
          {
            name: "xxx",
            type: "pie",
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 10,
              borderColor: "#fff",
              borderWidth: 2,
            },

            label: {
              show: false,
              position: "center",
            },
            emphasis: {
              label: {
                show: true,
                fontSize: "40",
                fontWeight: "bold",
              },
            },
            labelLine: {
              show: false,
            },
            data: sData,
          },
        ],
      });
    },

• 3 曲线图

 let option = {
        tooltip: {
          //提示框
          trigger: "axis",
          position: function (pt) {
            return [pt[0], "10%"];
          },
        },

        grid: {
          top: "32px",
          bottom: "45px",
        },
        textStyle: {
          color: "#7d7d7d",
        },
        xAxis: {
          name: "xxx",
          type: "category",
          boundaryGap: false, //左边铺满
          axisLine: {
            //不显示X轴线条
            show: false,
          },
          axisTick: {
            //坐标轴刻度也不显示
            show: false,
          },
          splitLine: {
            show: false,
          },
          data: xData,
        },
        yAxis: 
          {
            name: 'xxx',
            type: "value",
            nameTextStyle: {
              color: "red",
          },
        

        series: [
          {
            name: unit,
            type: "line",
            data: yData,
            smooth: true,
            areaStyle: {
              //区域面积
              color: "#f8fdfa",
            },
            itemStyle: {
              normal: {
                color: "#4dc583",
                lineStyle: {
                  //线颜色
                  color: "#4dc583",
                },
				label: {
                  //显示曲线上方数量
                  show: true,
                  position: "top",
                  textStyle: {
                    fontSize: 12,
                    fontFamily: "Microsoft YaHei",
                    color: "#4dc583",
                  },
				formatter:function(num){
					// console.log(num)
					if(num.value > 0){
						return num.value
					}else{
						return ''
					}
				}
                },
              },
            },
            // symbol: "none", //不需要拐点
          },
        ],
        dataZoom: [ //缩放轴
          {
            type: "slider",
            show: dataZoomEnd == 100 ? false : true,
            realtime: true,
            start: 0,
            end: dataZoomEnd,
          },
          {
            type: "inside",
            realtime: true,
            start: 0,
            end: dataZoomEnd,
          },
        ],
      };