小程序echarts循环显示折线图

最新推荐文章于 2023-11-22 14:13:10 发布

v_loading

最新推荐文章于 2023-11-22 14:13:10 发布

阅读量830

点赞数 2

CC 4.0 BY-SA版权

分类专栏：小程序文章标签：小程序

本文链接：https://blog.csdn.net/v_loading/article/details/117368005

本文介绍了如何在小程序中实现Echarts循环显示折线图，通过下载ec-canvas组件并将其集成到项目中，然后分别在wxml、wxss和js文件中配置相关代码。在实际操作中遇到数据更新后图表不刷新的问题，解决办法是使用同一个Echarts实例，通过切换数据来达到循环显示的效果。

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

下载组件

下载 ec-canvas 目录拷贝到自己的项目下
在这里插入图片描述

实现循环显示折线图

wxml

<view class='echart_wrap' wx:for="{
    
    {ecLine}}" wx:key="index">
    <ec-canvas ec="{
    
    { ecLine[index] }}"></ec-canvas>
  </view>

wxss

.echart_wrap{
  width: 100%;
  height: 700rpx;
}

js

import * as echarts from '../../ec-canvas/echarts';

function getOption(item,index) {
   
   
  let colors=['#FFC34F',"#efe303","#ff7f27","#b2e90b","#44B2FB"]
  let linecolor=colors[index] || '#3f48cc'
  let yd=item.values.map((i)=>{
   
   
    return i.v0
  })
  yd.reverse();
  let xd=item.values.map((i)=>{
   
   
    return i.testTm
  })
  xd.reverse();
  var option = {
   
   
    title: {
   
   //标题
      text: '',
      left: 'center'
    },
    renderAsImage: true, //支持渲染为图片模式
    color: [linecolor],//图例图标颜色
    legend: {
   
   
      show: true,
      itemGap: 25,//每个图例间的间隔
      top: 6,
      x: 10,//水平安放位置,离容器左侧的距离  'left'
      z: 100,
      textStyle: {
   
   
        color: '#383838'
      },
      data: [//图例具体内容
        {
   
   
          name: item.name,//图例名字
          textStyle: {
   
   //图例文本样式
            fontSize: 13,
            color: '#383838'
          },
          icon: 'roundRect'//图例项的 icon，可以是图片
        }
      ]
    },
    grid: {
   
   //网格
      left: 10,
      top:60,
      containLabel: true,//grid 区域是否包含坐标轴的刻度标签
    },

    xAxis: {
   
   //横坐标
      type: 'category',
      name: '',//横坐标名称
      nameTextStyle: {
   
   //在name值存在下，设置name的样式
        color: 'red',
        fontStyle: 'normal'
      },
      nameLocation:'end',
      splitLine: {
   
   //坐标轴在 grid 区域中的分隔线。
        show: true,
        lineStyle: {
   
   
          type: 'dashed'
        }
      },
      boundaryGap: false,//1.true 数据点在2个刻度直接  2.fals 数据点在分割线上，即刻度值上
      data: xd,
      axisLabel: {
   
   
        textStyle: {
   
   
          fontSize: 13,
          color: '#5D5D5D'
        }
      }
    }