lime-charts用法

最新推荐文章于 2024-08-16 16:24:02 发布

Koreyoshi·

最新推荐文章于 2024-08-16 16:24:02 发布

阅读量716

点赞数

文章标签： echarts javascript vue.js

本文链接：https://blog.csdn.net/koreyoshi123654/article/details/129755324

版权

文章展示了如何在Vue中创建一个自定义组件MyEcharts，该组件使用Echarts库来生成数据驱动的图表。组件接收chartData作为props，包括颜色、X轴和Y轴数据以及系列数据。在方法中初始化图表并设置选项，如颜色、网格、坐标轴和系列样式。

摘要由CSDN通过智能技术生成

组件：MyEcharts.vue

<template>
	<view style="width:100%;height:160px">
		<l-echart ref="chart" @finished="init"></l-echart>
	</view>
</template>

<script>
	import * as echarts from '@/uni_modules/lime-echart/static/echarts.min'
	export default {
		props: {
			chartData: {
				type: Object,
				default () {
					return {}
				}
			}
		},
		data() {
			return {
				color: ['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc']
			}
		},
		methods: {
			async init() {
				// chart 图表实例不能存在data里
				const chart = await this.$refs.chart.init(echarts);
				chart.setOption(this.setOption(this.chartData))
			},

			// 配置图表
			setOption(chartData) {
				let opt = {
					color: chartData.color ? chartData.color : this.color,
					grid: {
						left: 0,
						right: 0,
						top: 20,
						bottom: 5,
						containLabel: true,
					},
					xAxis: [{
						type: 'category',
						axisTick: false,
						//  改变x轴颜色
						axisLine: {
							lineStyle: {
								color: '#f0f0f0',
							}
						},
						// 字体样式
						axisLabel: {
							interval: 0, //可以设置成 0 强制显示所有标签。
							fontSize: 10,
							color: '#333333'
						},
						// 数据显示区域 线的颜色
						splitLine: {
							lineStyle: {
								color: '#f0f0f0',
								// color: 'rgba(255,255,255,0)',
							}
						},
						position: 'bottom',
						data: chartData.xData
					}],
					yAxis: [{
						name: chartData.yUnit ? chartData.yUnit : '',
						nameTextStyle: {
							fontSize: 12,
							color: '#999999'
						},
						axisTick: false,
						//  改变x轴颜色
						axisLine: {
							lineStyle: {
								color: '#f0f0f0',
							}
						},
						// 字体样式
						axisLabel: {
							interval: 0, //可以设置成 0 强制显示所有标签。
							fontSize: 10,
							color: '#333333'
						},
						// 数据显示区域 线的颜色
						splitLine: {
							lineStyle: {
								color: '#f0f0f0',
								// color: 'rgba(255,255,255,0)',
							}
						}
					}],
					series: chartData.seriesData
				}
				return opt
			}
		}
	}
</script>

vue文件引用及配置

<div style="width:100%;height:200px">
  <MyEcharts :chart-data="heard" />
</div>


import MyEcharts from '@/components/MyEcharts.vue'

data() {
  return {
	heard: {
		color: '#e93b5d',
		xData: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"],
		seriesData: [{
			type: 'line',
			data: [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3, ],
			areaStyle: {
				color: {
					type: 'linear',
					x: 0,
					y: 0,
					x2: 0,
					y2: 1,
					colorStops: [{
						offset: 0,
						color: 'rgba(233,59,93, 0.5)' // 0% 处的颜色
					}, {
						offset: 1,
						color: 'rgba(233,59,93, 0)' // 100% 处的颜色
					}]
				}
			}
		}],
	},
  }
}