微信小程序使用echarts 折线图分段显示不同的颜色
2022/1/17 17:07:18
本文主要是介绍微信小程序使用echarts 折线图分段显示不同的颜色,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
实现效果:
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; }
这篇关于微信小程序使用echarts 折线图分段显示不同的颜色的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-12-20微信小程序开发入门指南
- 2024-12-20小程序 createCameraContext() 怎么实现识别条形码功能?-icode9专业技术文章分享
- 2024-11-22微信小程序的接口信息py可以抓到吗?-icode9专业技术文章分享
- 2024-11-22怎样解析出微信小程序二维码带的参数?-icode9专业技术文章分享
- 2024-11-22微信小程序二维码怎样解析成链接?-icode9专业技术文章分享
- 2024-11-22微信小程序接口地址的域名需要怎么设置?-icode9专业技术文章分享
- 2024-11-22微信小程序的业务域名有什么作用-icode9专业技术文章分享
- 2024-11-22微信小程序 image有类似html5的onload吗?-icode9专业技术文章分享
- 2024-11-22微信小程序中怎么实现文本内容超出行数后显示省略号?-icode9专业技术文章分享
- 2024-11-22微信小程序怎么实现分享样式定制和图片定制功能?-icode9专业技术文章分享