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 /** * renderjs内的点击事件，回调到父组件 * @param {Object} params */ onViewClick(params) { this.$emit('click', params) } } } import echarts from '@/components/echarts/echarts.min.js' export default { data() { return { chart: null, clickData: null // echarts点击事件的值 } }, mounted() { this.init(); }, methods: { /** * 初始化echarts */ init() { // 根据id初始化图表 this.chart = echarts.init(document.getElementById(this.option.id)) this.update(this.option) // echarts的点击事件 this.chart.on('click', params => { // 把点击事件的数据缓存下来 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 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 } } } .echarts { width: 100%; height: 100%; } 2. index.vue页面(数据均已内置) 切换数据 import echarts from '@/components/echarts/echarts.vue' export default { data() { return { option: {}, option2: { notMerge: true, // 自定义变量：true代表不合并数据，比如从折线图变为柱形图则需设置为true；false或不写代表合并 tooltip: { trigger: 'axis', positionStatus: true, formatterStatus: false, // 自定义变量：是否格式化tooltip，设置为false时下面三项均不起作用 formatterUnit: '元', // 自定义变量：数值后面的单位 formatFloat2: true, // 自定义变量：是否格式化为两位小数 formatThousands: true // 自定义变量：是否添加千分位 }, legend: { data: ['', ''] }, grid: { left: '8%', right: '8%', bottom: '8%', containLabel: true }, xAxis: [{ name: '位移（m）', nameLocation: 'middle', //轴位置 nameGap: 26, //name名字与轴线间距 type: 'value', axisLine: { onZero: false } }], yAxis: [{ name: '载荷（KN）', nameLocation: 'middle', //轴位置 nameGap: 26, //name名字与轴线间距 type: 'value', axisLine: { onZero: false } }], series: [{ id: 'a', type: 'line', smooth: true, symbolSize: 0, data: [ [11.26, 44.8], [11.94, 44.52], [12.64, 44.31], [13.34, 44.26], [14.04, 44.36], [14.76, 44.51], [15.46, 44.71], [16.2, 44.84], [16.92, 44.92], [17.64, 44.85], [18.38, 44.69], [19.1, 44.46], [19.84, 44.21], [20.56, 44.06], [21.28, 43.99], [22, 44.03], [22.72, 44.14], [23.46, 44.27], [24.16, 44.36], [24.88, 44.38], [25.58, 44.31], [26.28, 44.2], [26.98, 44.07], [27.68, 43.97], [28.36, 43.91], [29.04, 43.89], [29.72, 43.94], [30.38, 44.02], [31.04, 44.13], [31.68, 44.22], [32.34, 44.26], [32.98, 44.28], [33.6, 44.26], [34.22, 44.24], [34.84, 44.19], [35.44, 44.19], [36.04, 44.18], ] }] }, option3: { 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)' } }] } }; }, components: { echarts }, onLoad() { this.option = this.option2 }, methods: { /** * 点击事件 * @param {Object} params */ echartsClick(params) { console.log('点击数据', params) }, /** * 切换数据 */ updateClick() { if (this.option === this.option2) { this.option = this.option3 } else { this.option = this.option2 } } } }; 3. page.json中添加页面配置 { "pages": [ { "path": "pages/index", "style": { "navigationBarTitleText": "echarts-renderjs" } } ], "globalStyle": { "navigationBarTextStyle": "black", "navigationBarTitleText": "uni-app", "navigationBarBackgroundColor": "#F8F8F8", "backgroundColor": "#F8F8F8" } } |
柱图、折线图： 
【本文地址】
公司简介
联系我们
今日新闻 |
点击排行 |
|
推荐新闻 |
图片新闻 |
|
专题文章 |