uni-app引用echarts

深藏阁楼爱情的钟 2023-03-12 09:09 53阅读 0赞

**目录**

3.引用（5是页面代码）

下面的是 echarts.vue的代码 、

代码里script.src = './static/echarts.min.js'   （更改路径不行的话，还是建议使用此路径） 在【4里面】

4.echarts.min.js   代码 （下载如果C币不够可以私信或者留言我给调整下【本来是不要C币的系统自动加币俺也没办法】）

5.随便起一个Vue页面 复制下面代码

demo下载地址 （下载如果C币不够可以私信或者留言我给调整下）

--------------------

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjEyMDY2OQ_size_16_color_FFFFFF_t_70][]![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjEyMDY2OQ_size_16_color_FFFFFF_t_70 1][]

**（不支持小程序【支持app和H5】） **

1.首先在uni-app中不支持包下载所以得自己先新建一个项目，然后进入到这个目录下，执行 **npm init**，接下来一路回车即可。

2.下载所需要的库

npm install echarts mpvue-echarts --save

### 3.引用（5是页面代码） ###

import echarts from '@/components/echarts/echarts.vue';

###  下面的是 echarts.vue的代码   您可以在components 创建一个echarts的文件夹里面放echarts.vue ###

### 代码里script.src = './static/echarts.min.js'   （更改路径不行的话，还是建议使用此路径） 在【4里面】 ###

<template>
    	<view>
    		<view class="echarts" :prop="option" :change:prop="echarts.update"></view>
    	</view>
    </template>
    
    <script>
    	export default {
    		name: 'Echarts',
    		props: {
    			option: {
    				type: Object,
    				required: true
    			}
    		}
    	}
    </script>
    
    <script module="echarts" lang="renderjs">
    	export default {
    		data() {
    			return {
    				chart: null
    			}
    		},
    		mounted() {
    			if (typeof window.echarts === 'object') {
    				this.init()
    			} else {
    				// 动态引入类库
    				const script = document.createElement('script')
    				script.src = './static/echarts.min.js'
    				// script.src = './static/echarts/echarts.min.js'
    				script.onload = this.init
    				document.head.appendChild(script)
    			}
    		},
    		methods: {
    			/**
    			 * 初始化echarts
    			 */
    			init() {
    				this.chart = echarts.init(this.$el)
    				this.update(this.option)
    			},
    			/**
    			 * 监测数据更新
    			 * @param {Object} option
    			 */
    			update(option) {
    				if (this.chart) {
    					// 因App端，回调函数无法从renderjs外传递，故在此自定义设置相关回调函数
    					if (option) {
    						// tooltip
    						if (option.tooltip) {
    							// 判断是否设置tooltip的位置
    							if (option.tooltip.positionStatus) {
    								option.tooltip.position = this.tooltipPosition()
    							}
    							// 判断是否格式化tooltip
    							if (option.tooltip.formatterStatus) {
    								option.tooltip.formatter = this.tooltipFormatter(option.tooltip.formatterUnit, option.tooltip.formatFloat2, option.tooltip.formatThousands)
    							}
    						}
                        // 设置新的option
    					this.chart.setOption(option, option.notMerge)
    					}
    					
    				}
    			},
    			/**
    			 * 设置tooltip的位置，防止超出画布
    			 */
    			tooltipPosition() {
    				return (point, params, dom, rect, size) => {
    					//其中point为当前鼠标的位置，size中有两个属性：viewSize和contentSize，分别为外层div和tooltip提示框的大小
    					let x = point[0]
    					let y = point[1]
    					let viewWidth = size.viewSize[0]
    					let viewHeight = size.viewSize[1]
    					let boxWidth = size.contentSize[0]
    					let boxHeight = size.contentSize[1]
    					let posX = 0 //x坐标位置
    					let posY = 0 //y坐标位置
    					if (x < boxWidth) { //左边放不开
    						posX = 5
    					} else { //左边放的下
    						posX = x - boxWidth
    					}
    					if (y < boxHeight) { //上边放不开
    						posY = 5
    					} else { //上边放得下
    						posY = y - boxHeight
    					}
    					return [posX, posY]
    				}
    			},
    			/**
    			 * tooltip格式化
    			 * @param {Object} unit 数值后的单位
    			 * @param {Object} formatFloat2 是否保留两位小数
    			 * @param {Object} formatThousands 是否添加千分位
    			 */
    			tooltipFormatter(unit, formatFloat2, formatThousands) {
    				return params => {
    					let result = ''
    					unit = unit ? unit : ''
    					for (let i in params) {
    						if (i == 0) {
    							result += params[i].axisValueLabel
    						}
    						let value = '--'
    						if (params[i].data !== null) {
    							value = params[i].data
    							// 保留两位小数
    							if (formatFloat2) {
    								value = this.formatFloat2(value)
    							}
    							// 添加千分位
    							if (formatThousands) {
    								value = this.formatThousands(value)
    							}
    						}
    						// #ifdef H5
    						result += '\n' + params[i].seriesName + '：' + value + ' ' + unit
    						// #endif
    						
    						// #ifdef APP-PLUS
    						result += '<br/>' + params[i].marker + params[i].seriesName + '：' + value + ' ' + unit
    						// #endif
    					}
    					return result
    				}
    			},
    			/**
    			 * 保留两位小数
    			 * @param {Object} value
    			 */
    			formatFloat2(value) {
    				let temp = Math.round(parseFloat(value) * 100) / 100
    				let xsd = temp.toString().split('.')
    				if (xsd.length === 1) {
    					temp = (isNaN(temp) ? '0' : temp.toString()) + '.00'
    					return temp
    				}
    				if (xsd.length > 1) {
    					if (xsd[1].length < 2) {
    						temp = temp.toString() + '0'
    					}
    					return temp
    				}
    			},
    			/**
    			 * 添加千分位
    			 * @param {Object} value
    			 */
    			formatThousands(value) {
    				if (value === undefined || value === null) {
    					value = ''
    				}
    				if (!isNaN(value)) {
    					value = value + ''
    				}
    				let re = /\d{1,3}(?=(\d{3})+$)/g
    				let n1 = value.replace(/^(\d+)((\.\d+)?)$/, function(s, s1, s2) {
    					return s1.replace(re, '$&,') + s2
    				})
    				return n1
    			}
    		}
    	}
    </script>
    
    <style lang="scss" scoped>
    	.echarts {
    		width: 100%;
    		height: 100%;
    	}
    </style>

### 4.echarts.min.js   代码 （下载如果C币不够可以私信） 建议放到static里面 ###

**下面这是在gitee上面的自行下载**

[https://gitee.com/mxrhgq/uni-app-reference-echartsmin][https_gitee.com_mxrhgq_uni-app-reference-echartsmin]

> [https://download.csdn.net/download/weixin\_42120669/12419947][https_download.csdn.net_download_weixin_42120669_12419947]

#  5.随便起一个Vue页面 复制下面代码 #

<template>
    	<view class="viewimg">
    		<view>
    			<view>echarts示列</view>
    			<echarts :option="option" style="height: 300px;"></echarts>
    			<button @click="updateClick">更新数据</button>
    		</view>
    		<view><echarts :option="optionone" style="height: 400px;"></echarts></view>
    		<view><echarts :option="optiontwo" style="height: 400px;"></echarts></view>
    	</view>
    </template>
    
    <script>
    import echarts from '@/components/echarts/echarts.vue';
    export default {
    	data() {
    		return {
    			option: {},
    			optionone:{},
    			optiontwo:{}
    		};
    	},
    	onLoad() {
    		console.log(777777);
    	},
    	components: {
    		echarts
    	},
    	mounted() {
    		this.logstatrt();
    		this.logstatrtone();
    		this.logstatrttwo();
    	},
    	methods: {
    		logstatrt() {
    			console.log('初次调用');
    			this.option = {
    				backgroundColor: '#011246',
    				tooltip: {
    					trigger: 'axis',
    					axisPointer: { type: 'shadow' }
    				},
    				grid: {
    					top: '25%',
    					right: '45',
    					bottom: '20',
    					left: '30'
    				},
    				legend: {
    					data: [{ name: '人保' }, { name: '太保' }, { name: '平安' }, { name: '人保增速' }, { name: '太保增速' }, { name: '平安增速' }],
    					top: '0%',
    					textStyle: {
    						color: 'rgba(255,255,255,0.9)' //图例文字
    					}
    				},
    				dataZoom: [
    					{
    						type: 'slider',
    						realtime: true,
    						//移动端展示方式
    						handleSize: '100%', //滑动条两侧的大小
    						start: 0,
    						end: 50
    					}
    				],
    				grid: {
    					left: '3%',
    					right: '4%',
    					bottom: '15%',
    					height: '70%',
    					containLabel: true
    				},
    				xAxis: [
    					{
    						type: 'category',
    						data: ['2015', '2016', '2017', '2018', '2019'],
    						axisLine: { lineStyle: { color: 'rgba(255,255,255,.1)' } },
    						axisLabel: { textStyle: { color: 'rgba(255,255,255,.7)', fontSize: '14' } }
    					}
    				],
    				yAxis: [
    					{
    						type: 'value',
    						name: '单位万',
    						splitLine: {
    							show: false
    						},
    						axisLabel: {
    							show: true,
    							fontSize: 14,
    							color: 'rgba(255,255,255,.6)'
    						},
    						axisLine: {
    							min: 0,
    							max: 10,
    							lineStyle: { color: 'rgba(255,255,255,.4)' }
    						} //左线色
    					},
    					{
    						type: 'value',
    						name: '增速',
    						show: true,
    						axisLabel: {
    							show: true,
    							fontSize: 14,
    							formatter: '{value} %',
    							color: 'rgba(255,255,255,.6)'
    						},
    						axisLine: { lineStyle: { color: 'rgba(255,255,255,.4)' } }, //右线色
    						splitLine: { show: true, lineStyle: { color: 'rgba(255,255,255,.1)' } } //x轴线
    					}
    				],
    				series: [
    					{
    						name: '人保',
    						type: 'bar',
    						data: [35, 36.6, 38.8, 40.84, 41.6],
    						// "barWidth": "30",
    						itemStyle: {
    							normal: {
    								color: {
    									type: 'linear',
    									x: 0.5,
    									y: 0.5,
    									r: 0.5,
    									colorStops: [
    										{
    											offset: 0,
    											color: '#00FFE3' // 0% 处的颜色
    										},
    										{
    											offset: 1,
    											color: '#4693EC' // 100% 处的颜色
    										}
    									],
    									globalCoord: false // 缺省为 false
    								}
    							}
    						}
    						// "barGap": "0.2"
    					},
    					{
    						name: '太保',
    						type: 'bar',
    						data: [16, 14.8, 14.1, 15, 16.3],
    
    						color: {
    							type: 'linear',
    							x: 0.5,
    							y: 0.5,
    							r: 0.5,
    							colorStops: [
    								{
    									offset: 0,
    									color: '#248ff7' // 0% 处的颜色
    								},
    								{
    									offset: 1,
    									color: '#6851f1' // 100% 处的颜色
    								}
    							],
    							globalCoord: false // 缺省为 false
    						}
    					},
    					{
    						name: '平安',
    						type: 'bar',
    						data: [10.2, 9.2, 9.1, 9.85, 8.9],
    						color: {
    							type: 'linear',
    							x: 0.5,
    							y: 0.5,
    							r: 0.5,
    							colorStops: [
    								{
    									offset: 0,
    									color: '#fccb05' // 0% 处的颜色
    								},
    								{
    									offset: 1,
    									color: '#f5804d' // 100% 处的颜色
    								}
    							],
    							globalCoord: false // 缺省为 false
    						}
    					},
    					{
    						name: '人保增速',
    						type: 'line',
    						yAxisIndex: 1,
    
    						data: [0, 6.01, 5.26, 1.48],
    						lineStyle: {
    							normal: {
    								width: 2
    							}
    						},
    						itemStyle: {
    							normal: {
    								color: '#86d370'
    							}
    						},
    						smooth: true
    					},
    					{
    						name: '太保增速',
    						type: 'line',
    						yAxisIndex: 1,
    
    						data: [0, -4.73, 6.38, 8.67],
    						lineStyle: {
    							normal: {
    								width: 2
    							}
    						},
    						itemStyle: {
    							normal: {
    								color: '#3496f8'
    							}
    						},
    						smooth: true
    					},
    					{
    						name: '平安增速',
    						type: 'line',
    						yAxisIndex: 1,
    
    						data: [0, -1.09, 8.24, -9.64],
    						lineStyle: {
    							normal: {
    								width: 2
    							}
    						},
    						itemStyle: {
    							normal: {
    								color: '#fbc30d'
    							}
    						},
    						smooth: true
    					}
    				]
    			};
    		},
    		logstatrtone(){
    			this.optionone = {
    			    backgroundColor: '#0c1e55',
    			
    			color: ['#00a0fc', '#ffe400', '#ff9a09', '#ef1e5f','#23cbe5', '#ec561b', '#ffa500', '#dddf00', '#b23aee', '#50b332'],
    			
    			    tooltip: {
    			        trigger: 'item',
    			        // formatter: "   {a} <br/>{b} : {c} ({d}%)"
    			        formatter: "   企业数：{c}"
    			    },
    			    legend: { // 图例-图上面的分类
    			        // orient: 'vertical',
    			        // right: 30,
    			        //   icon: 'rect',//长方形
    			        icon: 'circle',
    			        top: "1%",
    			        itemWidth: 10,
    			        itemHeight: 10,
    			        // itemGap: 13,
    			       data: ['16℃以下', '16-18℃', '18-20℃', '20-22℃','22-24℃','24-26℃','26℃以上' ],
    			        // right: '56%',
    			        textStyle: {
    			            fontSize: 14,
    			            color: '#a6cde8',
    			            lineHeight: 49
    			        },
    			        formatter: function(name) {
    			            return "" + name + ""
    			        },
    			        padding: [2, 2]
    			    },
    			    grid: {
    			        top: '20%',
    			        left: '53%',
    			        right: '10%',
    			        bottom: '6%',
    			        containLabel: true
    			    },
    			
    			    series: [{
    			        label: {
    			            normal: {
    			                    formatter: '{b|{b}：} {c} \n  {per|{d}%} ',
    			                    rich: {
    			                    }
    			                },
    			            emphasis: {
    			                show: true,
    			            }
    			        },
    			        // labelLine: {
    			        //     normal: {
    			        //         show: false
    			        //     }
    			        // },
    			        name: '访问来源',
    			        type: 'pie',
    			        radius: '55%',
    			        center: ['50%', '60%'],
    			        data:[{
    			                value: 195,
    			                name: '16℃以下'
    			            },
    			            {
    			                value: 185,
    			                name: '16-18℃'
    			            },
    			            {
    			                value: 260,
    			                name: '18-20℃'
    			            },
    			            {
    			                value: 213,
    			                name: '20-22℃'
    			            },
    			            {
    			                value: 52,
    			                name: '22-24℃'
    			            },
    			            {
    			                value: 35,
    			                name: '24-26℃'
    			            },
    			            {
    			                value: 46,
    			                name: '26℃以上'
    			            },
    			        ],
    			        itemStyle: {
    			            emphasis: {
    			                shadowBlur: 10,
    			                shadowOffsetX: 0,
    			                shadowColor: 'rgba(0, 0, 0, 0.5)'
    			            }
    			        },
    			          labelLine: {
    			            normal: {
    			                length: 5,
    			                length2: 1,
    			                smooth: true,
    			            }
    			        },
    			    }]
    			};
    		},
    logstatrttwo(){
    	var m2R2Data = [{
    	        value: 335,
    	        value1: 234,
    	        legendname: 'Ⅰ类',
    	        name: "Ⅰ类",
    	        itemStyle: {
    	            color: "#8d7fec"
    	        }
    	    },
    	    {
    	        value: 310,
    	        value1: 314,
    	        legendname: 'Ⅱ类',
    	        name: "Ⅱ类",
    	        itemStyle: {
    	            color: "#5085f2"
    	        }
    	    },
    	    {
    	        value: 234,
    	        value1: 235,
    	        legendname: 'Ⅲ类',
    	        name: "Ⅲ类",
    	        itemStyle: {
    	            color: "#e75fc3"
    	        }
    	    },
    	    {
    	        value: 154,
    	        value1: 213,
    	        legendname: 'Ⅳ类',
    	        name: "Ⅳ类",
    	        itemStyle: {
    	            color: "#f87be2"
    	        }
    	    },
    	    {
    	        value: 335,
    	        value1: 321,
    	        legendname: 'Ⅴ类',
    	        name: "Ⅴ类",
    	        itemStyle: {
    	            color: "#f2719a"
    	        }
    	    },
    	
    	];
    	
    	this.optiontwo = {
    	    title: [{
    	            text: '全网调控情况',
    	            textStyle: {
    	                fontSize: 16,
    	                color: "black"
    	            },
    	            left: "35%"
    	        },
    	        {
    	            text: '全网均温',
    	            subtext: 44.5 + '℃',
    	            textStyle: {
    	                fontSize: 15,
    	                color: "black"
    	            },
    	            subtextStyle: {
    	                fontSize: 20,
    	                color: 'black'
    	            },
    	            textAlign: "center",
    	            x: '40%',
    	            y: '44%',
    	        }
    	    ],
    	    tooltip: {
    	        trigger: 'item',
    	        formatter: function(parms) {
    	            var str = parms.seriesName + "</br>" +
    	                parms.marker + "" + parms.data.legendname + "</br>" +
    	                "当前温度：" + parms.data.value + "</br>" +
    	                "目标温度：" + parms.data.value1 + "</br>" +
    	                "占比：" + parms.percent + "%";
    	            return str;
    	        }
    	    },
    	    legend: {
    	        type: "scroll",
    	        orient: 'vertical',
    	        left: '80%',
    	        align: 'left',
    	        top: 'middle',
    	        textStyle: {
    	            color: '#8C8C8C'
    	        },
    	
    	    },
    	    series: [{
    	        name: '全网调控情况',
    	        type: 'pie',
    	        center: ['40%', '50%'],
    	        radius: ['40%', '65%'],
    	        clockwise: false, //饼图的扇区是否是顺时针排布
    	        avoidLabelOverlap: false,
    	        itemStyle: { //图形样式
    	            normal: {
    	                borderColor: '#ffffff',
    	                borderWidth: 1,
    	            },
    	        },
    	        label: {
    	            normal: {
    	                show: true,
    	                position: 'outter',
    	                formatter: function(parms) {
    	                    return parms.data.legendname
    	                }
    	            }
    	        },
    	        labelLine: {
    	            normal: {
    	                length: 15,
    	                length2: 13,
    	                smooth: true,
    	            }
    	        },
    	        data: m2R2Data
    	    }]
    	};
    },
    		/**
    		 * 更新数据
    		 */
    		updateClick() {
    			this.option = {
    				notMerge: true, // 自定义变量：true代表不合并数据，比如从折线图变为柱形图则需设置为true；false或不写代表合并
    				xAxis: {
    					type: 'category',
    					data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    				},
    				yAxis: {
    					type: 'value'
    				},
    				series: [
    					{
    						data: [120, 200, 150, 80, 70, 110, 130],
    						type: 'bar',
    						showBackground: true,
    						backgroundStyle: {
    							color: 'rgba(220, 220, 220, 0.8)'
    						}
    					}
    				]
    			};
    		}
    	}
    };
    </script>
    <style>
    .viewimg {
    	height: 100%;
    	/* background: #d1e9e9; */
    }
    </style>

# demo下载地址 （下载如果C币不够可以私信或者留言我给demo） #

[https://download.csdn.net/download/weixin\_42120669/12419908][https_download.csdn.net_download_weixin_42120669_12419908]

若按照文档仍没有弄出来加QQ:1433496926  加的时候备注下

如有帮助请点个赞呗

> // this.chart.getZr().on('click', params => \{  
> //  console.log("点击111")  
> //  let pointInPixel = \[params.offsetX, params.offsetY\]  
> //  console.log(pointInPixel)  
> //  if (this.chart.containPixel('grid', pointInPixel)) \{  
> //  let xIndex = this.chart.convertFromPixel(\{  
> //  seriesIndex: 0  
> //  \}, \[params.offsetX, params.offsetY\])\[0\]  
> //  console.log(xIndex)  
> //  \}  
> // \})
> 
> 放到子组件里面可以 但是 页面要是有很多的echarts的话 建议 在传点击参数判断下（子组件加点击事件我这么没有测试成功）

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjEyMDY2OQ_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20210304142233445.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjEyMDY2OQ==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjEyMDY2OQ_size_16_color_FFFFFF_t_70 1]: /images/20230312/b9bf7d2af228431b89f763c5cf64801e.png
[https_gitee.com_mxrhgq_uni-app-reference-echartsmin]: https://gitee.com/mxrhgq/uni-app-reference-echartsmin
[https_download.csdn.net_download_weixin_42120669_12419947]: https://download.csdn.net/download/weixin_42120669/12419947
[https_download.csdn.net_download_weixin_42120669_12419908]: https://download.csdn.net/download/weixin_42120669/12419908