小程序echarts循环显示折线图

下载组件

下载 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'
        }