uni-app 微信小程序 使用echarts

推荐使用插件市场 echarts-for-wx 插件 小程序中几乎可以完美使用 用法和echarts用法一致

使用方法

<uni-ec-canvas class="uni-ec-canvas" id="line-chart" canvas-id="multi-charts-line" :ec="ec"></uni-ec-canvas>

import uniEcCanvas from '@/components/uni-ec-canvas/uni-ec-canvas.vue'

data() {
			return {
				ec: {
					option: {
						tooltip: {
							// formatter:'{b}:{c}',
							trigger: 'axis',
							axisPointer: { // 坐标轴指示器，坐标轴触发有效
								type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
							}
						},
						grid: {
							left: '14%',
							right: '16%',
							top: '1%',
							bottom: '7%'
						},
						xAxis: {
							type: 'value',
							position: 'bottom',
							minInterval: 1,
							axisLine: {
								lineStyle: {
									color: "#333333"
								}
							},
							splitLine: {
								lineStyle: {
									type: 'dashed'
								}
							}
						},
						yAxis: {
							type: 'category',
							nameTextStyle: {
								color: "#333333",
								textBorderColor: "#333333"
							},
							axisLine: {
								lineStyle: {
									color: "#333333"
								}
							},
							data: ['离线', '停机', '保养', '维修', '待料', '故障', '运行']
						},
						series: [{
							type: 'bar',
							label: {
								show: true,
								formatter: '{c}台',
								textBorderColor: 'transparent',
								position: 'right',
								color: '#3f3f3f'
							},
							itemStyle: {
								normal: {
									color: function(params) {
										var colorList = ['#aaaaaa', '#6F7072', '#009de0', '#f04864', '#F7B233', '#ffeb00', '#009036'];
										return colorList[params.dataIndex]
									},
								}
							},
							data: [{
									value: 18,
									name: '离线',
									itemStyle: {
										normal: { color: "#aaaaaa" },
										emphasis: { color: "#aaaaaa" }
									}
								},
								{
									value: 0,
									name: "",
									itemStyle: {
										normal: { color: "#6F7072" },
										emphasis: { color: "#6F7072" }
									}
								},
								{
									value: 1,
									name: "",
									itemStyle: {
										normal: { color: "#009de0" },
										emphasis: { color: "#009de0" }
									}
								},
								{
									value: 0,
									name: "",
									itemStyle: { color: "#f04864" }
								},
								{
									value: 0,
									name: "",
									itemStyle: { color: "#E7CB84" }
								},
								{
									value: 1,
									name: "",
									itemStyle: { color: "#ffeb00" }
								},
								{ value: 1, name: "", itemStyle: { color: "#009036" } }
							]
						}]
					},
				}

			}
		},

效果
使用渐变色需引入

import * as echarts from '../../components/uni-ec-canvas/echarts';