echarts封装

1. html

<line-and-bar
            :dataX="insertDataX"
            :dataList="inserDataList"
            :id="'main'"
            :xSplitShow="true"
            xSplitType="dashed"
            xSplitColor="#ccc"
            :xLabelInterval="3"
            :gridX="50"
            :ylineShow="false"
            :labelShow="true"
            labelColor="#333"
            :gridX2="20"
            height="270px"
            marginTop="15px"
          ></line-and-bar>

2. js

data() {
    return {
      insertDataX: [1, 2, 3, 4, 5],
      inserDataList: [
        {
          arr: [
            {
              value: 1,
              label: 1
            },
            {
              value: 2,
              label: 2
            },
            {
              value: 3,
              label: 3
            }
          ],
          symbol: "emptyCircle",
          symbolSize: 4,
          type: "bar",
          lineColor: "rgba(74,121,238,1)"
        }
      ]
    };
  },

3. 组件

<template>
  <div class="barChart" :id="id" :ref="id"></div>
</template>
<script>
export default {
  name: "barChart",
  data() {
    return {
      myEchart: null
    };
  },
  mounted() {
    // 实际这个不用
    this.drawChart();
    window.addEventListener("resize", this.drawChart);
  },
  /*
    arr            数据
    symbol         圆点 节点
    symbolSize     节点大小
    type           图标类型
    lineColor      折线颜色  
    lineType       折线样式        ( 'dotted'虚线 'solid'实线 )
    colorTop       0% 处的颜色     ( 推荐  rgba(34,146,199, 0) )
    colorBottom    100% 处的颜色   ( 推荐  rgba(34,146,199, 0) )
  */
  props: {
    id: {
      type: String,
      default: "barChart"
    },
    // 宽
    width: {
      type: String,
      default: "200px"
    },
    // 高
    height: {
      type: String,
      default: "200px"
    },
    // 折线图数据
    dataList: {
      type: Array,
      default: () => []
    },
    // X轴数据
    dataX: {
      type: Array,
      default: () => []
    },
    // x轴上的刻度
    xAxisTick: {
      type: Boolean,
      default: false
    },
    // 柱状图顶点数字是否显示
    labelShow: {
      type: Boolean,
      default: false
    },
    // 柱状图顶点数字颜色
    labelColor: {
      type: String,
      default: "#29abe2"
    },
    labelFontSize: {
      type: String,
      default: "14"
    },
    // 柱状图顶点数字显示位置
    labelPosition: {
      type: String,
      default: "top"
    },
    // 柱状图顶点数字后缀
    lableSuffix: {
      type: String,
      default: ""
    },
    // // 圆点 节点
    // symbol: {
    //   type: String,
    //   default: "none",
    // },
    // 节点大小
    // symbolSize: {
    //   type: Number,
    //   default: 1,
    // },
    // 是否平滑曲线
    smooth: {
      type: Boolean,
      default: true
    },
    //改变折线点的颜色
    circleColor: {
      type: Array,
      default: () => []
    },
    // 鼠标划入效果
    tipShow: {
      type: Boolean,
      default: true
    },
    legendShow: {
      type: Boolean,
      default: false
    },
    legendTop: {
      type: String,
      default: "auto"
    },
    legendRight: {
      type: String,
      default: "auto"
    },
    legendBottom: {
      type: String,
      default: "auto"
    },
    legendLeft: {
      type: String,
      default: "auto"
    },
    legendData: {
      type: Array,
      default: () => []
    },
    legendColor: {
      type: String,
      default: "#8493c3"
    },

    // 坐标轴两边留白
    boundaryGap: {
      type: Boolean,
      default: false
    },
    // 是否显示x轴
    xlineShow: {
      type: Boolean,
      default: true
    },
    // X轴颜色
    xlineColor: {
      type: String,
      default: "#20325b"
    },
    // X轴宽度
    xlineWidth: {
      type: Number,
      default: 1
    },
    // x轴为虚线
    xlineType: {
      type: String,
      default: "dashed"
    },
    // 是否显示X轴所有的线
    xSplitShow: {
      type: Boolean,
      default: false
    },
    // 图表中X轴线样式
    xSplitType: {
      type: String,
      default: "solid"
    },
    // 图表中X轴线颜色
    xSplitColor: {
      type: String,
      default: "#20325b"
    },
    // x轴 标签显示控制 0 全部
    xLabelInterval: {
      type: Number,
      default: 0
    },
    // 是否显示y轴
    ylineShow: {
      type: Boolean,
      default: true
    },
    // y轴颜色
    ylineColor: {
      type: String,
      default: "#20325b"
    },
    // y轴颜宽度
    ylineWidth: {
      type: Number,
      default: 1
    },
    // 是否显示Y轴所有的线
    ySplitShow: {
      type: Boolean,
      default: false
    },
    // 图表中Y轴线样式
    ySplitType: {
      type: String,
      default: "solid"
    },
    // 图表中Y轴线颜色
    ySplitColor: {
      type: String,
      default: "#20325b"
    },
    // x轴字体颜色
    xColor: {
      type: String,
      default: "#8493c3"
    },
    // y轴字体颜色
    yColor: {
      type: String,
      default: "#8493c3"
    },
    company: {
      type: String,
      default: ""
    },
    // x轴文字旋转角度
    rotate: {
      type: Number,
      default: 0
    },
    // 柱状图颜色
    optionColor: {
      type: Array,
      default: () => ["#29abe2"]
    },
    barWidth: {
      type: String,
      default: "20px"
    },
    barBorderRadius: {
      type: Array,
      default: () => [0, 0, 0, 0]
    },
    gridX: {
      type: Number,
      default: 35
    },
    gridY: {
      type: Number,
      default: 20
    },
    gridX2: {
      type: Number,
      default: 35
    },
    gridY2: {
      type: Number,
      default: 30
    }
  },
  methods: {
    transfromNum(value) {
      var params = {};
      var k = 10000,
        size = ["", "万", "亿", "万亿"];
      var i;
      if (value < k) {
        params.value = value;
        params.unit = "";
      } else {
        i = Math.floor(Math.log(value) / Math.log(k));
        params.value = (value / Math.pow(k, i)).toFixed(0);
        params.unit = size[i];
      }

      return params;
    },
    drawChart() {
      var that = this;
      let timer = null;
      timer = setTimeout(() => {
        if (
          this.myEchart != null &&
          this.myEchart != "" &&
          this.myEchart != undefined
        ) {
          this.myEchart.dispose(); //销毁
        }
        if (!this.$refs[this.id]) return;
        this.myEchart = this.$echarts.init(this.$refs[this.id]);
        let seriesList = this.dataList.map((ele, index) => {
          return {
            data: ele.arr,
            // name: ele.name,
            name: "火警数",
            type: ele.type,
            symbol: ele.symbol,
            symbolSize: ele.symbolSize,
            smooth: this.smooth,
            areaStyle: {
              color: {
                type: "linear",
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  // 背景色
                  {
                    offset: 0,
                    color: ele.colorTop || "rgba(0,0,0, 0)" // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: ele.colorBottom || "rgba(0,0,0, 0)"
                  }
                ],
                global: false // 缺省为 false
              }
            },
            itemStyle: {
              normal: {
                label: {
                  show: this.labelShow, //开启显示
                  position: this.labelPosition, //在上方显示
                  textStyle: {
                    //数值样式
                    color: this.labelColor,
                    fontSize: this.labelFontSize
                  },
                  formatter: function(params) {
                    return params.value + that.lableSuffix;
                  }
                },
                borderRadius: this.barBorderRadius,
                // color: this.circleColor[index],
                lineStyle: {
                  // color: ele.lineColor, //改变折线颜色
                  type: ele.lineType || "solid"
                },
                color: new this.$echarts.graphic.LinearGradient(0, 1, 0, 0, [
                  {
                    //只要修改前四个参数就ok
                    offset: 0,
                    color: "#fff"
                  }, //柱图渐变色
                  {
                    offset: 1,
                    color: "#090"
                  }
                ])
              }
            }
          };
        });
        let option = {
          color: this.optionColor,
          // color: ["#FFC14E","#2AABE2"],
          barWidth: this.barWidth,
          grid: {
            x: this.gridX,
            y: this.gridY,
            x2: this.gridX2,
            y2: this.gridY2
          },
          tooltip: {
            show: this.tipShow,
            trigger: "axis"
          },
          legend: {
            show: this.legendShow,
            // icon: "roundRect",
            top: this.legendTop,
            right: this.legendRight,
            bottom: this.legendBottom,
            left: this.legendLeft,
            // data: this.legendData,
            textStyle: {
              color: this.legendColor
            }
          },
          xAxis: {
            type: "category",
            boundaryGap: this.boundaryGap,
            data: this.dataX,
            axisTick: {
              show: this.xAxisTick
            },
            // x轴设置
            axisLine: {
              show: this.xlineShow,
              lineStyle: {
                color: this.xlineColor,
                width: this.xlineWidth, //这里是为了突出显示加上的
                type: this.xlineType
              }
            },
            splitLine: {
              show: this.ySplitShow,
              lineStyle: {
                type: this.ySplitType,
                color: this.ySplitColor
              }
            },
            axisLabel: {
              color: this.xColor,
              rotate: this.rotate,
              //  让x轴文字方向为竖向
              interval: this.xLabelInterval
              // formatter: function(value) {
              //   return value.split('').join('\n')
              // }
            }
          },
          yAxis: {
            type: "value",
            axisLine: {
              show: this.ylineShow,
              lineStyle: {
                color: this.ylineColor,
                width: this.ylineWidth //这里是为了突出显示加上的
              }
            },
            axisLabel: {
              color: this.yColor,
              //formatter: "{value}" + this.company,
              formatter: function(value, index) {
                return (
                  that.transfromNum(value).value +
                  that.transfromNum(value).unit +
                  that.company
                );
              }
            },
            splitLine: {
              show: this.xSplitShow,
              lineStyle: {
                type: this.xSplitType,
                color: this.xSplitColor
              }
            }
          },
          series: seriesList
        };
        this.myEchart.setOption(option);
      }, 500);
    }
  },
  watch: {
    dataX: {
      handler(newName, oldName) {
        this.$nextTick(() => {
          this.drawChart();
          window.addEventListener("resize", this.drawChart);
        });
      },
      deep: true
    }
  },
  destroyed() {
    window.removeEventListener("resize", this.drawChart);
  }
};
</script>

<style lang="scss" scoped>
.barChart {
  width: 100%;
  height: 100%;
}
</style>