实现效果:
index.json文件:
{ "component": true, "usingComponents": { "ec-canvas":"../../components/ec-canvas/ec-canvas" } }
index.wxss 文件:
<view class="pie-charts"> <view class="lengendTitle"> <image src="{{tipImg}}" class="tipLineImg" /> <text class="tipTitle">时/分</text> </view> <ec-canvas id="mychart-dom-bar" canvas-id="mychart-bar" ec="{{ ec }}" ></ec-canvas> </view>
inex.js 文件配置:
import * as echarts from '../ec-canvas/echarts'; function initChart(canvas, width, height) { const chart = echarts.init(canvas, null, { width: width, height: height }); canvas.setChart(chart); var option = { grid: { show: false, top: '9%', right: '5%', left: '10%' }, xAxis: { type: 'category', axisLine: { show: true, lineStyle: { type: "dashed" } }, data: ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14'] }, yAxis: { type: 'value', splitLine: { show: false, }, axisLine: { show: true, lineStyle: { type: "dashed" } } }, series: [{ data: [0, 40, 10, 40, 25, 60, 40, 10, 60, 25, 0, 40, 10, 40, 25], type: 'line', smooth: true, itemStyle: { normal: { color: '#ffb71b', lineStyle: { // 系列级个性化折线样式 width: 4, type: 'solid', color: new echarts.graphic.LinearGradient(0, 0.4, 0.7, 1, [{ offset: 0, color: '#ffb71b' } , { offset: 0.4, color: '#b75cee' }, { offset: 0.7, color: '#66acfc' }, { offset: 1, color: '#3843fa' }]),//线条渐变色 } }, } }] }; chart.setOption(option); return chart; } Component({ /** * 组件的属性列表 */ properties: { }, /** * 组件的初始数据 */ data: { ec: { onInit: initChart }, tipImg: '../../img/lineTip.png' },
index.wxss文件:
.pie-charts { width: 100%; height: 500rpx; margin: 20px 0 0 10px; } .lengendTitle { display: flex; align-items: center; justify-content: center; padding-top: 20rpx; } .tipTitle { font-size: 28rpx; color: #ffffff; margin-left: 10rpx; letter-spacing: 5rpx; } .tipLineImg { width: 20rpx; height: 20rpx; padding-top: 7rpx; }