echarts 折线图 柱图 封装

components/echarts/index.vue 组件内容

<!-- 重叠柱状图 -->
<template>
  <div ref="chart" :style="styleCfg" />
</template>
<script>
export default {
name: 'EchartIndex',
props: {
  option: {
    default: () => {},
    type: Object
  },
  width: {
    default: 'auto',
    type: String | Number
  },
  height: {
    default: '300',
    type: String
  },
  autoHeight: {
    default: false,
    type: Boolean
  },
  minWidth:{
    default:'',
    type:String
  }
},
data() {
  return {
    myChart: ''
  };
},
computed: {
  styleCfg() {
    let width = isNaN(Number(this.width)) ? this.width : `${this.width}px`;
    let height = isNaN(Number(this.height))
      ? this.height
      : `${this.height}px`;
    let returnStyle=`width: ${width}; height: ${height}; `
    if(this.minWidth){
      returnStyle+='min-width:'+this.minWidth;
    }
    return returnStyle;
  }
},
watch: {
  height(newval) {
    this.$refs.chart.style.height = newval;
    this.resize();
  },
  option: {
    handler(a, b) {
      this.$forceUpdate();
      this.myChart && this.myChart.setOption(a,true);
    },
    immediate: true,
    deep: true
  }
},
created() {},
mounted() {
  this.draw();
  window.addEventListener('resize', this.cuntHeight);
},
methods: {
  cuntHeight() {
    if (!this.autoHeight) return;
    this.$nextTick(() => {
      if (!this.$refs.chart || !this.$refs.chart.parentNode) return;
      let num = this.$refs.chart.parentNode.clientHeight - 10;
      // console.log(num, 1234);
      this.$refs.chart.style.height = num + 'px';
      this.resize();
    });
  },
  draw() {
    this.myChart = this.$echarts.init(this.$refs.chart);
    this.myChart.getZr().on('click', param => { // 解决折线图没有拐点也有点击事件
      const point = [param.offsetX, param.offsetY]
      if (this.myChart.containPixel('grid', point)) { // 判断点击事件是否在图形区域内
        let xIndex = this.myChart.convertFromPixel({seriesIndex: 0}, point)[0] // 拿到x轴坐标
        let option = this.myChart.getOption()
        this.$emit('zrOnClick', option, xIndex);
      }
    })
    this.myChart.on('click', param => {
      this.echartOnClick(param);
    });
    this.myChart.on('mouseover', param => {
      this.echartOnMouseover(param);
    });
    this.myChart.on('mouseout', param => {
      this.echartOnMouseout(param);
    });
    this.myChart.on('legendselectchanged',param =>{
      this.echartOnLegendselectchanged(param);
    })
    this.myChart.setOption(this.option);
    this.cuntHeight()
  },
  echartOnClick(param) {
    this.$emit('echartOnClick', param);
  },
  echartOnLegendselectchanged(param) {
    this.$emit('echartOnLegendse', param);
  },
  echartOnMouseover(param) {
    this.$emit('echartOnMouseover', param);
  },
  echartOnMouseout(param) {
    this.$emit('echartOnMouseout', param);
  },
  setOption(param) {
    this.myChart && this.myChart.setOption(param);
  },
  init() {
    this.myChart && this.myChart.setOption(this.option);
  },
  resize() {
    this.myChart = this.$echarts.init(this.$refs.chart);
    this.myChart.resize();
  },
}
};
</script>

<style scoped>
.no-data{
  position: absolute;
  display: flex;
  width: 100%;
  height: 100%;
  align-items: center;
  text-align: center;
  
}
p{
    flex: 1;
  }
</style>

引用

<div style="padding:10px 20px">
 <chartline ref="myCharts" :option="_options2" width="100%" :minWidth="'360px'" :height="'200px'" :autoHeight="false"></chartline>
</div>


computed:{
      _options() {
        let custSerises=[]
        this.busbar_data.length&&this.busbar_data.forEach((item,index)=>{
          custSerises.push({
            name: item.name,
            type: 'line',
            //stack:"test",
            emphasis:{
              lineStyle:{
                // width:3,
                // color:"red"
              },
              itemStyle:{
                borderWidth:4
              }
            },
            symbolSize:1,
            lineStyle:{
              width:2
            },
            data: item.data_value,
            smooth:true
          })
        })

        const op = {

          tooltip: {
            trigger: 'axis',
            // axisPointer: {
            //   type: 'shadow'
            // },
            //解决折线图tooltip展示不全问题
            position:(pos,params,el,elRect,size)=>{
              var obj = {top:10};
              obj[['left,right'][+(pos[0] < size.viewSize[0] / 2)]] = 30
              return obj

            },
            backgroundColor: "#fff", // 提示框背景颜色
            textStyle: {
              fontSize: 14,
              color: "#505D6F",
            },
            // formatter:(params)=>{

            //   let str =""
            //   params.length&&params.forEach(e=>{
            //     str+=`<div style="width: 50%;display: block;float:left;height: 22px;">
            //         ${e.marker} ${e.seriesName} : ${e.value}
            //     </div>`
            //   })
            //   // console.log(params)
            //   return `<div style="background: #fff;border-radius: 10px;papdding:2px 10px;width: 250px;">
            //             <div>${params[0].name}</div>
            //             ${str}
            //         </div>`
            // }
          },
          // areaStyle:{
          //   normal:{
          //     color: new echarts.graphic.LinearGradient(
          //         0,0,0,1,[
          //           {offset:0.98,color:'rgba(25,163,223,0)'},
          //           {offset:0,color:'rgba(25,163,223,0.3)'},
          //           // {offset:0.98,color:'rgba(5,213,255,1)'},
          //           // {offset:0,color:'rgba(5,213,255,0)'},
          //         ],false
          //       ),
          //   }
          // },
          legend: {
            data: ["A相电压","B相电压","C相电压"],
            show:true,
            left: '50px',
            top:"0px",
            // width:"100%",
            orient:"horizontal",
            itemWidth:14,
            itemHeight:4,
            icon :"rect",
            padding:10

          },
          grid: [
            {
              right: '10px',
              bottom:"20px",
              left:"60px",
              top:"10px"
            }
          ],

          toolbox: {
            show: true,
            feature: {
              saveAsImage: {}
            }
          },
          color:["#3C8782","#3A82D3","#68CD99","#E6A55D","#43D8FD","#1562B8"],
          xAxis: {
            type: 'category',
            boundaryGap: true,
            // axisLabel :{
            //   interval:0,
            //   rotate:'70',//旋转度数
            // },
            axisLabel: {
              showMaxLabel: true,
              color:"rgb(119,119,119)",
            },
            data: this.busbar_data.time || []
            ,
            axisPointer: {
              snap: true
            },
            axisTick: {
              show: false
            },
            axisLine: {
              show: false,
              lineStyle: {
                color: "rgb(60,74,85)",
                type:"dashed"
              }
            },
            splitLine: {
              show: false,
              lineStyle: {
                color: "rgb(60,74,85)",
                type:"dashed"
              }
            }


          },
          yAxis: {
            name:"V",
            nameLocation:"end",
            max:(value)=>{
              return parseInt(value.max+(value.max*0.05))
            },
            min: function (value) {
                return parseInt(value.min - (value.min*0.05));
            },
            type: 'value',
            minInterval:1,
            axisLabel: {
              showMaxLabel: true,
              color:"rgb(31,31,31)",
              // axisLabel:{
                formatter:"{value} V"
              // }
            },
            nameTextStyle:{
              color:"rgb(31,31,31)"
            },
            axisPointer: {
              snap: true
            },
            axisTick: {
              show: false
            },
            axisLine: {
              show: false,
              lineStyle: {
                color: "rgb(60,74,85)"
              }
            },
            splitLine: {
              show: false,
              lineStyle: {
                color: "rgb(60,74,85)",
                type:"dashed"
              }
            },
          },
          series: [
          {
              name: "A相电压",
              type: 'line',
              //stack:"test",
              emphasis:{
                lineStyle:{
                  // width:3,
                  // color:"red"
                },
                itemStyle:{
                  borderWidth:4
                }
              },
              symbolSize:1,
              lineStyle:{
                width:2
              },
              data: this.busbar_data.ua,
              smooth:true
            },
            {
              name: "B相电压",
              type: 'line',
              //stack:"test",
              emphasis:{
                lineStyle:{
                  // width:3,
                  // color:"red"
                },
                itemStyle:{
                  borderWidth:4
                }
              },
              symbolSize:1,
              lineStyle:{
                width:2
              },
              data: this.busbar_data.ub,
              smooth:true
            },
            {
              name: "C相电压",
              type: 'line',
              //stack:"test",
              emphasis:{
                lineStyle:{
                  // width:3,
                  // color:"red"
                },
                itemStyle:{
                  borderWidth:4
                }
              },
              symbolSize:1,
              lineStyle:{
                width:2
              },
              data: this.busbar_data.uc,
              smooth:true
            },
          
          ]
        };
        return _.merge(op, this.options);
        },

}