uniapp使用echarts绘制各种图表（附带完整案例） |
您所在的位置：网站首页 › 多个项目用什么图表好用点呢视频 › uniapp使用echarts绘制各种图表（附带完整案例） |
uniapp使用echarts绘制各种图表（附带完整案例）
|
uniapp中使用echarts方案
一、在项目中安装echarts插件1.实现的效果图
二、代码（这里主要是做简单说明，代码请去码云下载）0. echarts.min.js文件1. echarts.vue文件（这是封装好的组件，复制就可以，简单案例无需改动）2. index.vue页面(数据均已内置)3. page.json中添加页面配置
由于ucharts不能满足所需图表要求，故使用了echarts 本案例引用至：https://ext.dcloud.net.cn/plugin?id=1668#rating 然后对其进行部分优化，解决安装到自己项目中，echarts引用错误等问题。 正常适配APP和H5 完整案例下载：点击去码云下载 一、在项目中安装echarts插件项目结构如下： 可以在自己项目里，按如下方式进行安装。 功图，这块数据量较大： 代码较大，请去码云下载 1. echarts.vue文件（这是封装好的组件，复制就可以，简单案例无需改动）若echarts.min.js文件路径要更换，修改lang="renderjs"这个标签引用即可 import echarts from ‘@/components/echarts/echarts.min.js’ export default { name: 'Echarts', props: { option: { type: Object, required: true } }, created() { // 设置随机数id let t = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789' let len = t.length let id = '' for (let i = 0; i { // 把点击事件的数据缓存下来 this.clickData = params }) }, /** * 点击事件，可传递到外部 * @param {Object} event * @param {Object} instance */ onClick(event, instance) { if (this.clickData) { // 把echarts点击事件相关的值传递到renderjs外 instance.callMethod('onViewClick', { value: this.clickData.data, name: this.clickData.name, seriesName: this.clickData.seriesName }) // 上次点击数据置空 this.clickData = null } }, /** * 监测数据更新 * @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 = x - boxWidth - 1 } if (y >= boxHeight) { // 上边放的下 posY = y - boxHeight - 1 } 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 += '' + 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 |
柱图、折线图： 
【本文地址】
今日新闻 |
推荐新闻 |