今天接到产品的需求，要求一个图表可以展示两条折线。但是呢，总的有五个维度，我们要能任意选择两个维度进行比较，其中四个维度都是数字，还好实现，唯有一个转化率，要在坐标轴上显示成百分比。没办法啊，如果echarts不支持呢，做不出来也没事，但如果都没尝试，就说不行的话，那就是开发的问题了。所以就试着去查找配置文档，还好啊，找到了一个formatter方法，传送门 点这里。所以庆幸最后搞定了，指不定以后会用到，在此记录一下，毕竟脑容量有限，好记性不如烂笔头。
先说明：echart版本：4.2.1。效果图如下：
直接上代码，先声明一个基本的option：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 |
// 引入公共的图表配置，坐标轴文字颜色啊，与四周的边距啊什么的 import { grid, axisObj, axisPointer, returnLineSeries, returnChartLegend } from '@/libs/common-chart' const barLineChart = { grid: grid, tooltip: { trigger: 'axis', axisPointer: axisPointer, // 为了将销售转化率显示成百分比，所以自定义了formatter formatter: function(params,ticket,callBack){ let startHtml = params[0].axisValue + '<br/>' let listArr = [] for(let i = 0;i< params.length; i++){ const item = params[i] // echarts会根据你定义的颜色返回一个生成好的带颜色的标记，直接实用即可 let str = item.marker if(item.seriesName === '销售转化率'){ str += (item.seriesName + ': ' + item.value*100 + '%') }else{ str += (item.seriesName + ': ' + item.value) } listArr.push(str) } return startHtml + listArr.join('<br/>') } }, legend: { itemWidth: 10, itemHeight: 10, data:[ // 自动生成legend returnChartLegend(0,{name:''}), returnChartLegend(1,{name:''}) ] }, xAxis: Object.assign({ type: 'category', interval: 'auto', data: [], },axisObj), yAxis: [ Object.assign({ type: 'value', // name: '辆', axisLabel: { formatter: '{value}', } },axisObj), Object.assign({ type: 'value', // name: '元', axisLabel: { formatter: '{value}' } },axisObj)], series: [ // 自动生成series returnLineSeries(0,{name:'',data:[]}), returnLineSeries(1,{name:'',yAxisIndex: 1,data:[]}) ] } |
然后定义了缓存的数据：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
// 用于缓存每次的请求下来的结果 let cacheChartData = { sdate: [], // 统计日期 jdj: [], // 件单价 pnum: [], // 人流量 scount: [], // 销售单量 snum: [], // 销售金额 zhl: [] // 转化率 } // 标签的名字与单位映射数组，注意，这里每一项都定义了一个formatter方法，是用于y轴使用的 const tagAndChatDataMap = [ {value:'pnum',name:'人流量',unit:'次',formatter:'{value}'}, {value:'scount',name:'销售次数',unit:'次',formatter:'{value}'}, {value:'snum',name:'销售额',unit:'次',formatter:'{value}'}, {value:'jdj',name:'件单价',unit:'次',formatter:'{value}'}, { value:'zhl', name:'销售转化率', unit:'次', formatter: function(value){ return value*100 + '%' } } ] |
最后就是给option赋值，并渲染图表了
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
// 循环设置每一项的数据 // 这里的1和4就代表我们选择了销售次数和销售转化率做对比 [1,4].forEach((v,i) => { const item = tagAndChatDataMap[v] barLineChart.legend.data[i].name = item.name barLineChart.yAxis[i].name = item.name // unit barLineChart.yAxis[i].axisLabel.formatter = item.formatter barLineChart.series[i].name = item.name barLineChart.series[i].data = cacheChartData[item.value] }) // 设置横坐标 barLineChart.xAxis.data = cacheChartData['sdate'] // 设置option chartInstance.setOption(barLineChart) |
好了，由于是代码笔记，没啥多说的，到此为止啦。
发表评论