uniapp 使用 echarts实现图表

之前使用uniapp来做项目的时候遇到过图表，当时也是使用的echart和uchart，当时echart在uniapp官方插件中说停止维护。

后来就了解到了ucharts,当时使用ucharts还是免费的，现如今ucharts也开始收费了。

因为之前做pc端项目的时候用echarts次数多，使用起来也方便。这次也是采用echarts来实现图表，在开发预览中图表是没问题的，但是在真机运行中发现图表不显示，兼容出问题了。于是乎各种搜索才找到解决的办法。
其实在开发中安装了依赖，但在真机运行的时候还是不行，接下来就演示下操作步骤：

第一步：安装依赖，回车就行

npm install echarts mpvue-echarts --save

第二步：下载echarts.min.js

把下载好的echarts.min.js库放到static文件夹中。

第三步：在components文件夹中新建一个公共组件echarts.vue，

值得注意的是引入echarts库的路径 script.src = ‘./static/echarts.min.js’

<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.initdocument.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) {// tooltipif (option.tooltip) {// 判断是否设置tooltip的位置if (option.tooltip.positionStatus) {option.tooltip.position = this.tooltipPosition()}// 判断是否格式化tooltipif (option.tooltip.formatterStatus) {option.tooltip.formatter = this.tooltipFormatter(option.tooltip.formatterUnit, option.tooltip.formatFloat2, option.tooltip.formatThousands)}}// 设置新的optionthis.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 H5result += '\n' + params[i].seriesName + '：' + value + ' ' + unit// #endif// #ifdef APP-PLUSresult += '<br/>' + params[i].marker + params[i].seriesName + '：' + value + ' ' + unit// #endif}return result}},/*** 保留两位小数* @param {Object} value*/formatFloat2(value) {let temp = Math.round(parseFloat(value) * 100) / 100let 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})+$)/glet 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>

第四步：在page目录下新建一个页面，也就是需要引入图表的页面。

<template><view class="echarts"><echarts :option="option" style="height: 620rpx;"></echarts></view>
</template>
<script>import echarts from '@/components/echarts/echarts.vue';export default {data() {return {option: {},};},components: {echarts},mounted() {this.logstatrt();},methods: {logstatrt() {console.log('初次调用');this.option = {series: [{radius: '100%',type: 'gauge',startAngle: 180,endAngle: 0,min: 0,max: 1,splitNumber: 0,pointer: {show: false},axisLine: {lineStyle: {width: 45,color: [[0.8, '#005CFF'],[1, '#00CEF3']]}},splitLine: {length: 0},axisLabel: {color: '#464646',fontSize: 20,distance: -60,formatter: function(value) {return '';}},title: {offsetCenter: [0, '-20%'],fontSize: 20,color: '#fff'},detail: {fontSize: 30,offsetCenter: [0, '-40%'],valueAnimation: true,formatter: function(value) {return value;},color: '#fff'},data: [{name: ' 总数',value: 10000}]}]};},}</script>

这样就完美解决掉echarts在真机中兼容问题了。

还在加班中，写个笔记记录下，继续搬砖了。。。

uniapp 使用 echarts实现图表相关推荐

uni-app 使用web的echarts画图表
uni-app 使用web的echarts画图表 initEcharts: function() {let data = {xAxis: [0, 1, 2, 3, 4, 5],data: [25, 3 ...
JS实现Echarts的图表保存为图片功能
文章目录需求分析开发准备实现思路效果图参考链接需求分析实际项目开发过程中经常会有图表展示功能,同时为了满足用户需要,会附带着图表导出功能,主要形式就是保存为图片.在Echarts中本身就 ...
knockout+echarts实现图表展示
一.需要学习的知识 knockout, require, director, echarts, jquery.简单的入一下门,网上的资料很多,最直接就是进官网校习. 二.效果展示三.require的 ...
ECharts 常用图表一看即会「散点图」「饼图」「地图」「雷达图」「仪表盘」
文接上篇 ECharts 入门知识 ECharts 入门真的很简单 ,本文继续介绍 ECharts 常用图表相关内容. 一.散点图散点图多用于推断不同维度数据之间的相关性,如下图判断身高体重相关性散 ...
在jsp中使用ECharts制作图表
ECharts插件的下载地址http://echarts.baidu.com/download.html 先来看看我们要达到的效果!后面直接上代码,如下图: 下面直接贴上代码我们这里写的都是些死的数 ...
echarts 实现图表缩放功能 dataZoom自带属性实现
echarts 实现图表缩放功能亲测有效,dataZoom自带属性实现图表数据过多展示起来密密麻麻看不到细节,需要实现缩放这确实是实现了缩放,但是需求是标尺进行缩放,我们可以添加如下属性图表数 ...
ECharts动态图表展示
1.首先简要的介绍一下Echarts: ECharts,缩写来自Enterprise Charts,商业级数据图表,一个纯javascript的图标库,兼容当前绝大多数浏览器,提供直观,生动,可交互, ...
Apache Echarts常用图表之柱状图
文章目录 Echarts常用图表柱状图 1. 柱状图的实现步骤 2. 柱状图的常见效果最大值\最小值 `markPoint` 平均值 `markLine` 数值显示 `label` 柱宽度 `ba ...
Chart.js与ECharts.js图表组件对比与使用
Chart.js与ECharts.js图表组件对比与使用常用的图表组件 Chart.js与ECharts.js的简要介绍与使用. Chart.js Chart.js官方网址.里面包括文档.例子和G ...