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