销量趋势图表（折线图）通用代码

最新推荐文章于 2023-10-29 19:02:56 发布

猕猴桃-HR

最新推荐文章于 2023-10-29 19:02:56 发布

阅读量595

点赞数

分类专栏： echarts

本文链接：https://blog.csdn.net/weixin_45677987/article/details/119833599

版权

echarts 专栏收录该内容

39 篇文章

订阅专栏

本文介绍如何使用Echarts创建商家销售趋势的折线图。首先，通过初始化图表对象并设置配置项，然后获取服务器数据并进行处理。接着，更新图表数据并处理分辨率适配问题，确保图表在窗口大小变化时能正确显示。最后，讨论了在组件销毁时解除窗口大小变化的监听，确保资源的释放。示例代码中展示了从服务器获取数据、设置图表样式和堆叠效果，以及处理窗口调整大小时的适配方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1:  代码结构流程
  1.1:  初始化图表对象 initChart     // 初始化配置项initOption
  1.2:  获取数据 getData             //  对allData  进行赋值
  1.3:  处理数据更新图表 updateChart     //  数据配置dataOption
  1.4:  分辨率适配问题      //  窗口大小变化事件的监听resize   (screenAdapter)
                           //  组件销毁时取消监听


// 商家销售趋势图表  (折线图)
<template>
  <div class="com-container">
    <div class="com-charts" ref="trend_ref">
     
    </div>
  </div>
</template>


export default {
   data() {
     return {
       chartsInstance = null,   // 保存chartsInstance 数据
       allData: null,   //  服务器返回的数据

     }
  },
  mounted() {
   this.initCharts(),  
   this.getData(),
   window.addEventListener('resize', this.screenAdapter);
   this.screenAdapter();
  },

  // 组件销毁的时候
  destroyed() {
     window.removeEventListen('resize', this.screenAdapter())
  },

  methods: {
    initChart () {
       // 第二个参数chalk  表示主题的使用
      this.chartInatance = this.$echarts.init(this.$refs.trend_ref， 'chalk');
      const initOption = {
        // 坐标轴位置的设置
        grid: {
          left: '3%',
          top: '35%',
          left: '4%',
          bottom: '1%',
          containLabel: true
        },
        // 工具提示
        tooltip: {
          trigger: 'axis'    // 鼠标移上去工具提示
        },
        legend: {
          left: 20,
          top: '15%',
          icon: 'circle'   // 图例为圆圈
        }
        xAis: {
         type: 'category',
         boundaryGap: false,   // 是否具备间隔 (间隙)
        },
        yAis: {
         type: 'value'
        } 
      }
      this.chartInatance.setOption(initOption);
    },
    async getData () {
       await { data: ret } this.$http.get('trend')
       // 对 allData 进行赋值
       this.allData = ret;
       this.updateChart();     // 更新操作
    },
    updateChart () {
       // 处理数据
       const timeArr = this.allData.common.month;
       const valueArr = this.allData.map.data;
       const seriesArr = valueArr.map((item, index)=> {
         return {
           name: item.name,
           type: 'line',
           data: item.data,
           stack: 'map',  // 堆叠图的效果
           areaStyle: {
             color: new this.$echart.graphic.LinearGradint(0, 0, 0, 1. [
               {      // 0 % 的颜色
                  offset: 0,
                  color: colorArr1[index]
               },
               {      // 100% 的颜色
                  offset: 1,
                  color: colorArr2[index]
               }
             ])
           }
         }
       })
       // 图例的数据
       const legendArr = valueArr.map(item=> {
         return item.name
       })
       const dataOption = {
          xAis: {
            data: timeArr,
          },
          legend: {
            data: legendArr;
          }
          series: seriesArr
       };
       this.chartInatance.setOption(dataOption);
    },
    screenAdapter() {
      const adapterOption = {};
      this.chartInatance.setOption(adapterOption);
      this.chartInatance.resize();   // 重置方法
    }
  }
}

<style lang="less" scoped>
 
</style>
-----------------------------------------------
 如果请求的不是基准路径:
 可以在当前页面引入axios 第三方网路请求库;
 axios.get('加上请求路径');
 axios 请求路径 返回的是一个 Promise 对象;
 可以使用async...  await...   进行简化操作;