uni-app中引入echarts（亲测有效！！！）

忘是亡心i 2022-10-31 10:53 43阅读 0赞

如何引入：[原博地址][Link 1]  
echarts.min.js插件下载：[下载教程博客][Link 2] [官网地址][Link 3]

## 最终效果： ##

![在这里插入图片描述][20210222114738170.png]

## 1、echarts.vue组件代码如下： ##

![在这里插入图片描述][20210222114246832.png]

<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>

## 2、上述echarts.vue组件使用： ##

![在这里插入图片描述][20210222114654386.png]

pages/page2/index.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.series=[{ name: '人保', type: 'bar', data: [10, 10, 10, 10, 10], // "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 } ] // 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>

[Link 1]: https://blog.csdn.net/weixin_42120669/article/details/106123645
[Link 2]: https://blog.csdn.net/muriyue6/article/details/105773711?utm_medium=distribute.pc_relevant_download.none-task-blog-baidujs-2.nonecase&depth_1-utm_source=distribute.pc_relevant_download.none-task-blog-baidujs-2.nonecase
[Link 3]: https://echarts.baidu.com/download.html
[20210222114738170.png]: /images/20221024/7e48a526f4eb42689597c5f391b04145.png
[20210222114246832.png]: /images/20221024/475dbc0054024a2b8a9bd2c72d1c0c21.png
[20210222114654386.png]: /images/20221024/7108e3e914c544d0a7e075a20fac263a.png