uni-app引用echarts
官网:https://uniapp.dcloud.net.cn/tutorial/renderjs.html#%E7%A4%BA%E4%BE%8B
使用renderjs 引入echarts (不支持小程序【支持app和H5】)
官网例子:https://ext.dcloud.net.cn/plugin?id=1207
使用步骤:
0、在static 放入echarts/echarts.min.js 文件(ps:本echarts.min.js 示例只下载了 柱状图,折线图,饼图)
1、在components中建立echarts.vue 代码如下:
代码里script.src = './static/echarts/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/echarts.min.js' // script.src = './static/echarts/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、将组件放入需要用到的vue 界面中 使用如下
<template> <view class="content"> <view style="padding:20px">echarts.min.js 只下载了 柱状图 折线图 饼图 </view> <echarts :option="option" style="height: 400px;"></echarts> <echarts :option="option2" style="height: 400px;"></echarts> <echarts :option="option3" style="height: 400px;"></echarts> </view> </template> <script> export default { data() { return { option: { title: { text: 'ECharts 入门示例' }, tooltip: {}, legend: { data: ['销量'] }, xAxis: { data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"] }, yAxis: {}, series: [{ name: '销量', type: 'bar', data: [5, 20, 36, 10, 10, 20] }] }, option2: { tooltip: { trigger: 'item' }, legend: { type: 'scroll', orient: 'vertical', right: 0, top: 10, bottom: 20, // data: data.legendData }, series: [ { name: 'Access From', type: 'pie', radius: ['40%', '60%'], center: ['40%', '50%'], avoidLabelOverlap: false, label: { show: false, position: 'center' }, emphasis: { label: { show: true, fontSize: 40, fontWeight: 'bold' } }, labelLine: { show: false }, data: [ { value: 1048, name: '拒绝服务' }, { value: 735, name: '拒绝服务2' }, { value: 580, name: '拒绝服务3' }, { value: 484, name: '拒绝服务4' }, { value: 300, name: '拒绝服务4' } ] } ] }, option3: { xAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] }, yAxis: { type: 'value' }, series: [ { data: [150, 230, 224, 218, 135, 147, 260], type: 'line' } ] }, } }, onLoad() { }, methods: { } } </script>
3、效果如下(h5与手机端正常)
4、文件目录如下:
ps:官网提供的demo如下图 下载下来是正常的 但是在使用饼状图,折线图的时候 浏览器上是正常显示的 但是手机上显示不了 出现如下错误 ,所以上面例子是调整过 手机上也能正常显示的
demo 下载链接 在HBuilder x 中可以运行看效果
https://files.cnblogs.com/files/blogs/702532/renderjs-echarts-demo.zip?t=1682304925&download=true