微信小程序使用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-05-302024年最新版云开发cms开通步骤,开始开发微信小程序前的准备工作,认真看完奥!
- 2024-03-30微信小程序的网络设置,及网络请求:wx.request(OBJECT)
- 2024-01-22基于taro搭建小程序多项目框架
- 2024-01-13小程序开发:在插件市场寻找步骤条组件并二开
- 2024-01-05钉钉小程序生态—企业机器人加互动卡片,改善用户体验的开始!
- 2023-12-29【UniApp】-uni-app-打包成小程序
- 2023-12-26性能翻倍!京东亿级体量小程序优化实践
- 2023-12-25小程序优化:第三方SDK过大解决方案
- 2023-11-26微信小程序文件预览和下载-文件系统
- 2023-11-2652天学习微信小程序计划No.2:注册小程序账号&安装开发者工具