uni-app 使用web的echarts画图表

uni-app 使用web的echarts画图表

initEcharts: function() {
				let data = {
					xAxis: [0, 1, 2, 3, 4, 5],
					data: [25, 35, 47, 33, 142, 29],
				}
				this.chart2 = this.load_echart(this.setChartBar(data), 'canvasLine');

			},
			load_echart: function(options, id) {
				let myChart
				if (id && options) {
					myChart = echarts.init(document.getElementById(id));
					myChart.setOption(options, true)
				}
				return myChart
			},
			// echart的属性设置
			setChartBar: function(data) {
				let option = {
					color: this.echartColor,
					tooltip: {},
					legend: {
						name: '电价曲线',
						position: 'left'
					},
					xAxis: {
						data: data.xAxis,
						splitArea: { // 网格区域
							show: false // 是否显示，默认为false
						},
						splitLine: { // gird 区域中的分割线
							show: false, // 是否显示
						},
						axisTick: {
							show: false
						},
						axisLine: {
							show: true,
							lineStyle: {
								color: '#ccc'
							},
						},
						axisLabel: { // 坐标轴的标签
							show: true, // 是否显示
							inside: false, // 是否朝内
							rotate: 0, // 旋转角度
							margin: 8, // 刻度标签与轴线之间的距离
							color: '#999', // 默认轴线的颜色
							textStyle: {
								color: '#999'
							},
						},
					},
					yAxis: [{
						type: 'value',
						show: true, // 是否显示
						position: 'left', // y轴位置
						offset: 0, // y轴相对于默认位置的偏移
						type: 'value', // 轴类型，默认为 ‘category’
						name: '(元/kWh)', // 轴名称
						nameLocation: 'end', // 轴名称相对位置value
						nameTextStyle: { // 坐标轴名称样式
							color: '#ccc',
							padding: [0, 0, 0, 0] // 坐标轴名称相对位置
						},
						splitArea: { // 网格区域
							show: false // 是否显示，默认为false
						},
						splitLine: { // gird 区域中的分割线
							show: false, // 是否显示
						},
						axisTick: {
							show: false
						},
						axisLine: {
							show: true,
							lineStyle: {
								color: '#ccc'
							},
						},
						axisLabel: { // 坐标轴的标签
							show: true, // 是否显示
							inside: false, // 是否朝内
							rotate: 0, // 旋转角度
							margin: 8, // 刻度标签与轴线之间的距离
							color: '#999', // 默认轴线的颜色
							textStyle: {
								color: '#999'
							},
						},
					}],
					grid: [{
						x: '8%',
						y: '16%',
						width: '80%',
						height: '68%'
					}, ],
					series: [{
						name: '电价曲线',
						type: 'line',
						data: data.data,
						smooth: false,
						symbol: 'none',
						color: '#4040ff'
						// yAxisIndex: 1
					}, ]
				}
				return option
			},

mounted() {
			if (typeof window.echarts === 'function') {
				this.initEcharts()
			} else {
				// 动态引入较大类库避免影响页面展示
				const script = document.createElement('script')
				// view 层的页面运行在 www 根目录，其相对路径相对于 www 计算
				script.src = 'static/js/echart/echarts.js'
				script.onload = this.initEcharts.bind(this)
				document.head.appendChild(script)
			}
			this.mGetDate();
		},

注意

1. 只兼容h5和app，其他小程序不建议使用。详细介绍见官网

<script module="echarts" lang="renderjs">
//上面的代码块写在这里
</script>

"class-style" id="id">//同web端一样，需要设置宽高