uniapp 使用renderjs引入echarts

效果图：

1.1renderjs引入echarts 

组件zmui-echarts.vue：

//使用renderjs 就让app拥有类似有.HTML文件的环境 能直接挂载.js的能力

2.使用

import zmuiEcharts from '@/components/zmui-echarts/zmui-echarts.vue'
components: {
			zmuiEcharts
		},


export default {
    data(){
        return{
            echartOptions: {
					backgroundColor: '#ffffff',
					title: {
						text: 'mg/L',
						textStyle: {
							fontSize: 12,
							fontWeight: 'normal',
							color: '#858585', //标题颜色
						},
						top: 0,
						left: '4%',
					},
					tooltip: {
						show: false
						// axisPointer: {
						// 	type: "axis",
						// 	textStyle: {
						// 		color: "#000"
						// 	}
						// },
						// formatter: (data) => {
						// 	// 可以自定义文字和样式，用行内样式，数据包含在data参数中
						// 	let text = ` ${data.name}：${data.value}`
						// 	return text
						// }
					},
					grid: {
						top: "5%",
						right: "3%",
						bottom: '13%',
					},
					xAxis: [{
						data: [],
						margin: 20,
						interval: 0,
						rotate: 40,
						color: '#858585',
						textStyle: {
							fontSize: 12
						},
						axisLine: {
							lineStyle: {
								color: '#858585',
							}
						},
						axisTick: {
							show: true
						},
					}],
					axisLine: {
						show: false,
						lineStyle: {
							color: '#858585', //y轴颜色
						}
					},
					axisTick: {
						show: false
					},
					splitLine: {
						show: false
					},
					dataZoom: [{
							"show": true,
							"height": 8,
							"xAxisIndex": [
								0
							],
							bottom: '0%',
							start: 0,
							end: 6,
							handleIcon: "M-292,322.2c-3.2,0-6.4-0.6-9.3-1.9c-2.9-1.2-5.4-2.9-7.6-5.1s-3.9-4.8-5.1-7.6c-1.3-3-1.9-6.1-1.9-9.3c0-3.2,0.6-6.4,1.9-9.3c1.2-2.9,2.9-5.4,5.1-7.6s4.8-3.9,7.6-5.1c3-1.3,6.1-1.9,9.3-1.9c3.2,0,6.4,0.6,9.3,1.9c2.9,1.2,5.4,2.9,7.6,5.1s3.9,4.8,5.1,7.6c1.3,3,1.9,6.1,1.9,9.3c0,3.2-0.6,6.4-1.9,9.3c-1.2,2.9-2.9,5.4-5.1,7.6s-4.8,3.9-7.6,5.1C-285.6,321.5-288.8,322.2-292,322.2z",
							handleSize: "130%",
							handleStyle: {
								color: "#fff",
								shadowColor: "#B1B5B9",
								shadowBlur: 5,
							},
							backgroundColor: "#DEE3F4",
							fillerColor: "#008efe",
							endValue: 5,
						},
						{
							"type": "inside",
							"show": true,
							"height": 15,
							"start": 1,
							"end": 35
						}
					],
					yAxis: [{
						type: 'value',
						min: 0,
						max: 0,
						interval: 0.01,
						name: 'nj',
						nameTextStyle: {
							color: '#ffffff'
						},
						axisLine: {
							show: true
						},
						axisTick: {
							show: false
						},
						splitLine: {
							show: false,
						},
						axisLabel: {
							color: '#858585',
							textStyle: {
								fontSize: 13
							},
							formatter: function(value1) {
								return value1;
							},
							water: {
								name: 'water',
								code: 'code'
							},
				
						},
				
					}],
				
				
					series: [{
						label: {
							normal: {
								show: true,
								color: '#333',
								position: 'top',
							}
						},
						name: 'nj',
						type: 'bar',
						data: [],
						barWidth: '8px',
						itemStyle: {
							normal: {
								formatterColor: true,
								formatterType: "one",
							}
						},
					}]
				}
        }
    }
}