echarts使用

实现效果

echarts图表封装

<template>
  <div class="mychart" ref="chart" id="id"></div>
</template>

<script>
import * as echarts from 'echarts'
export default {
  data() {
    return {
      mychart: null,
      time: null
    }
  },
  mounted() {
    this.chart()
  },
  props: {
    datax: { // x轴数据
      type: Array,
      required: true
    },
    datay: { // y轴数据
      type: Array,
      required: true
    },
    imgUrl: { // 拖动组件两侧的
      type: String,
      default:'cdn图片路径'
    },
    color: {
      type: String,
      default: '#fb8753'
    },
    gradientColor: {
      type: Array,
      required: true
    },
    unit: {
      type: String,
      default: '单位/张'
    },
    unit1: {
      type: String,
      default: '张'
    },
    start: {
      type: Number,
      default: 30
    },
    end: {
      type: Number,
      default: 75
    }
  },
  watch: {
    datax() {
      this.chart()
    },
    datay() {
      this.chart()
    },
  },
  methods: {
    // 轮播tootip
    lunboEcharts(echartsId, dataOption) {
      let currentIndex = -1
      if (this.time) clearInterval(this.time)
      this.time = setInterval(() => {
        const dataLen = dataOption.series[0].data.length
        echartsId.dispatchAction({
          type: 'downplay',
          seriesIndex: 0,
          dataIndex: currentIndex
        })
        currentIndex = (currentIndex + 1) % dataLen
        echartsId.dispatchAction({
          type: 'highlight',
          seriesIndex: 0,
          dataIndex: currentIndex
        })
        echartsId.dispatchAction({
          type: 'showTip',
          seriesIndex: 0,
          dataIndex: currentIndex
        })
      }, 1000)
    },
    chart() {
      const option = {
        // animation: true,
        // animationDuration: 1000,
        
        // 点击出现的标签
        tooltip: {
          extraCssText: 'z-index: 2000',
          trigger: 'axis',
          axisPointer: {
            type: 'shadow',
            label: {
              formatter: ' ',
              margin: 0,
              color: '#252B50',
              fontSize: '14'
            },
            shadowStyle: {
              color: new echarts.graphic.LinearGradient(
                0,
                0,
                0,
                1,
                this.gradientColor
              ),
              width: 'auto'
            }
          },
          backgroundColor: 'rgba(255,255,255,0.5)',
          formatter: (params) => {
            let res = `${params[0].name} <br/>`
            for (const item of params) {
              if (item.value !== 0 && item.value !== '0.00') {
                return (res += `<span style="background: ${item.color}; height:10px; width: 10px; border-radius: 50%;display: inline-block;margin-right:10px;"></span> ${item.value} ${this.unit1}<br/>`)
              }
            }
          }
        },
        
        // 表格标题
        title: {
          subtext: '（ 曲线图缩放、左右拖动，更精彩！）',
          left: 'right',
          subtextStyle: {
            color: '#ff0000'
          },
          top: 15
        },
        // tag标注
        // legend: {
        //   data: ['bar', 'error']
        // },

        // 缩放条
        dataZoom: [
          {
            type: 'inside',
            show: false,
            xAxisInex: 0,
            start: this.start,
            end: this.end
          },
          {
            type: 'slider',
            show: true,
            height: 10,
            borderColor: 'transparent',
            backgroundColor: '#edf3ff',
            dataBackground: {
              lineStyle: {
                color: '#edf3ff'
              },
              areaStyle: {
                color: '#edf3ff'
              }
            },
            handleIcon: `image://${this.imgUrl}`,
            handleColor: this.color,
            handleSize: 28,
            handleStyle: {
              borderColor: this.color,
              shadowBlur: 4,
              shadowOffsetX: 1,
              shadowOffsetY: 1,
              shadowColor: this.color,
              borderCap: 'round'
            },
            fillerColor: this.color,
            start: this.start,  // 缩放组件默认显示最后的位置 0（作为百分比使用）
            end: this.end,  // 缩放组件默认显示最后的位置 100（作为百分比使用）
            filterMode: 'none',
            moveHandleSize: 0
            // labelFormatter: function (value) {
            //   return 'aaa' + value + 'bbb'
            // }
          }
        ],
        
        xAxis: {
          data: this.datax
        },
        
        grid: {
          left: '55'
        },
        
        yAxis: {
          show: true,  //  前提：y轴显示
          name: this.unit,  // y轴单位
          nameTextStyle: {
            //  单位样式
            // color: '#FFFFFF', //  字体颜色
            fontSize: 14, //  字体大小
            padding: [0, 15, 4, 0] //  内填充
          }
          // offset: '-8'
        },
        
        series: [
          {
            label: { // 除了0值，显示其他曲线图上的数据
              position: 'right',
              normal: {
                show: true,
                formatter: function (params) {
                  if (params.value > 0) {
                    return params.value
                  } else {
                    return ''
                  }
                }
              }
            },
            offset: '-8',
            type: 'line',  // 折线图
            // name: 'bar',
            // data: barData,
            data: this.datay,
            itemStyle: {
              color: this.color
            },
            smooth: true,
            // 线条样式
            lineStyle: {
              color: this.color
            },
            symbol: 'circle',
            symbolSize: 5,
            areaStyle: { // 线条下方区域阴影
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: this.color
                },
                {
                  offset: 1,
                  color: 'rgb(255, 255, 255)'
                }
              ])
            }
          }
        ]
      }
      
      let mychart = this.$echarts.getInstanceByDom(this.$refs.chart)
      if (mychart == null) {
        this.myChart = this.$echarts.init(this.$refs.chart)
        mychart = this.$echarts.init(this.$refs.chart)
      }
      mychart.clear()
      mychart.setOption(option, true)
      
      window.onresize = () => {
        mychart.resize() // echarts图表自适应
      }
      
      // 改变缩放组件文字标志位置
      const sliderZoom = mychart._componentsViews.find(
        (view) => view.type === 'dataZoom.slider'
      )
      // sliderZoom._displayables.handleLabels[0].attr('position', [40, 15])
      // sliderZoom._displayables.handleLabels[1].attr('position', [-40, 15])
      sliderZoom._displayables.handleLabels[0].x = 40
      sliderZoom._displayables.handleLabels[0].y = 15
      sliderZoom._displayables.handleLabels[1].x = -40
      sliderZoom._displayables.handleLabels[1].y = 15
    }
  }
}
</script>

<style scoped>
.mychart {
  width: 100%;
  height: 100%;
}
</style>

echarts使用

<myEcharts
    class="proCharts"
    :datax="datax"
    :datay="datay"
    :imgUrl="imgUrl"
    :color="color"
    :gradientColor="gradientColor"
    :unit="unit"
    :unit1="unit1"
    :start="start"
    :end="end"
></myEcharts>

import myEcharts from '@/components/echarts.vue'
components: { myEcharts },