• 在vue中封装一个ecahet图表组件


    封装一个简化的echart组件,

    没有把很多echart功能和样式做的很活,

    只是一个简单的动态数据更新图表的组件化小例子,

    首先创建个小文件

     写入一行小代码

    (这里犯了个错误,直接给div写点击事件的话,操作的是 Canvas(DOM元素),而非图表上的节点,导致点了半天只弹出一堆鼠标xy坐标的信息,而不是我要的折线图表里横纵坐标上的数据)

     

    把 name 发出去,可以通过 this .$refs 找到你当前的 图表

    如果图表有点击事件的话,用 $emit发出事件

    (所以这里就得用echart内部的点击事件来发出事件 -- 才能正确返回我要的 图表内部节点的数据)

     

    因为后面调接口(选择不同时间段等)会返回不同的图表数据,所以这里用一个 lineChartData 把数据部分单独弄出来

    至于样式,写死就好了

     注意要在 mputed 中渲染图表

    window.addEventListener('resize', () => {
      this.lineChart_1.resize()
    })

    (窗口改变时echart图表大小更新)

     

     这样就把数据单独拿出来了,因为截图屏幕太小,省略了一些样式。

    ——————————————————————————————————————

    在 父组件中 :

     

     

    在 data() 中 也定义个 变量 lineChartData(叫啥名都行,注意前面必须用 lineChartData 来绑定) 来接收数据

    然后只需要调接口 改变你 定义的这个 lineChartData 变量的 值就好了,

    注意 组件中写死了 时间是 【data.time 】折线图数据是【data.lineData】;

    这里发现还有一点,数据变了图表没更新 ,而  setOption(this.lineOptions(val), true) 中也加了 true 

    那不行我们就在组件中监听一下数据的变化:

    这样数据改变时,他就会重新绘制了。

    ——————————————————————————————————————————————

    这里是完整代码:

    <template>
      <div class="lineChart" :ref="name"></div>
    </template>
    <script>
    export default {
      name: 'lineChart',
      data () {
        return {}
      },
      props: {
        name: {
          type: String,
          default: ''
        },
        lineChartData: {
          type: [Array, Object]
        }
      },
      watch: {
        lineChartData: {
          handler (val) {
            this.lineChart_1.setOption(this.lineOptions(val), true)
          },
          deep: true
        }
      },
      mounted () {
        this.init()
      },
      methods: {
        init () {
          this.lineChart_1 = this.$echarts.init(this.$refs[this.name])
          this.lineChart_1.setOption(this.lineOptions(this.lineChartData), true)
          this.lineChart_1.on('click', (params) => {
            this.$emit('lineChartClick', params)
          })
          window.addEventListener('resize', () => {
            this.lineChart_1.resize()
          })
        },
        lineOptions (data) {
          return {
            text: '新增总订单',
            textStyle: {
              color: '#fff',
              fontWeight: 'normal',
              fontSize: 14
            },
            tooltip: {
              trigger: 'axis',
              formatter: '月份:{b} <br/>当月新增订单数 : {c}',
              axisPointer: {
                type: 'none'
              }
            },
            xAxis: {
              type: 'category',
              boundaryGap: false,
              data: data.xData
            },
            yAxis: {
              type: 'value',
              splitLine: {
                lineStyle: {
                  type: 'dashed',
                  color: 'rgba(255,255,255,0.2)'
                }
              }
            },
            series: [{
              data: data.yData,
              type: 'line',
              lineStyle: {
                color: '#93A64E',
                 2
              }, // 线条的样式
              areaStyle: {
                normal: {
                  color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{ // 折线图颜色渐变
                    offset: 0,
                    color: 'rgba(147, 166, 78,1)'
                  }, {
                    offset: 1,
                    color: 'rgba(121, 142, 79,0.1)'
                  }])
                }
              }
            }]
          }
        }
      }
    }
    </script>
    <style lang="scss" scoped>
    .lineChart {
       100%;
      height: 400px;
    }
    </style>
  • 相关阅读:
    图的深度遍历
    数据结构实验图论一:基于邻接矩阵的广度优先搜索遍历

    满汉全席
    2-sat(模板)
    2-sat
    花匠
    维护序列NOI2005
    序列终结者
    杨辉三角
  • 原文地址:https://www.cnblogs.com/listen9436/p/11586638.html
Copyright © 2020-2023  润新知