uniapp引入echarts App端 formatter无效问题

一时失言乱红尘 2022-11-18 11:00 694阅读 0赞

前言

在开发中有时候根据需求需要添加总和之类的特殊要求，发现在web端没有问题在App端解析不了formatter 里面函数

解决方案

问题原因;需要在setOption之前手动设置,如下
封装echarts.vue组件，主要在这里面设置 formatter函数

  1. <template>
  2.     <view>
  3.         <view class="echarts" :prop="option"  :change:prop="echarts.update"></view>
  4.     </view>
  5. </template>
  7. <script>
  8.     export default {
  9.         name: 'Echarts',
  10.         props: {
  11.             option: {
  12.                 type: Object,
  13.                 required: true
  14.             },
  15.             numLeng:{
  16.                 type:Number
  17.             }
  18.         }
  19.     }
  20. </script>
  22. <script module="echarts" lang="renderjs">
  23.     export default {
  24.         data() {
  25.             return {
  26.                 chart: null
  27.             }
  28.         },
  29.         mounted() {
  30.             if (typeof window.echarts === 'object') {
  31.                 this.init()
  32.             } else {
  33.                 // 动态引入类库
  34.                 const script = document.createElement('script')
  35.                 script.src = './static/echarts.js'
  36.                 // script.src = './static/echarts/echarts.min.js'
  37.                 script.onload = this.init
  38.                 document.head.appendChild(script)
  39.             }
  40.         },
  41.         methods: {
  42.             /**
  43.              * 初始化echarts
  44.              */
  45.             init() {
  46.                 this.chart = echarts.init(this.$el)
  47.                 this.update(this.option)
  48.             },
  49.             /**
  50.              * 监测数据更新
  51.              * @param {Object} option
  52.              */
  53.             update(option) {
  54.                 if (this.chart) {
  55.                     // 因App端，回调函数无法从renderjs外传递，故在此自定义设置相关回调函数
  56.                     if (option) {
  58.                         // tooltip
  59.                         if (option.tooltip) {
  60.                             // 判断是否设置tooltip的位置
  61.                             if (option.tooltip.positionStatus) {
  62.                                 option.tooltip.position = this.tooltipPosition()
  63.                             }
  64.                             // 判断是否格式化tooltip
  65.                             if (option.tooltip.formatterStatus) {
  66.                                 // this.tooltipFormatter 里面的参数对应 tooltip里面自定义的名字 在这里设置 往下看
  67.                                 option.tooltip.formatter = this.tooltipFormatter(option.tooltip.formatterUnit, option.tooltip.formatFloat2, option.tooltip.formatThousands,option.tooltip.formatFunDefeat,option.tooltip.formatFunClue)
  68.                             }
  69.                             // if (option.tooltip.formatterStatus) {
  70.                             //     if( this.numLeng==2){
  71.                             //         option.tooltip.formatter = this.formatFunDefeat()
  72.                             //     }
  74.                             // }
  75.                         }
  76.                     }
  77.                     // 设置新的option
  78.                     this.chart.setOption(option, option.notMerge)
  79.                 }
  80.             },
  81.             /**
  82.              * 设置tooltip的位置，防止超出画布
  83.              */
  84.             tooltipPosition() {
  85.                 return (point, params, dom, rect, size) => {
  86.                     //其中point为当前鼠标的位置，size中有两个属性：viewSize和contentSize，分别为外层div和tooltip提示框的大小
  87.                     let x = point[0]
  88.                     let y = point[1]
  89.                     let viewWidth = size.viewSize[0]
  90.                     let viewHeight = size.viewSize[1]
  91.                     let boxWidth = size.contentSize[0]
  92.                     let boxHeight = size.contentSize[1]
  93.                     let posX = 0 //x坐标位置
  94.                     let posY = 0 //y坐标位置
  95.                     if (x < boxWidth) { //左边放不开
  96.                         posX = 5
  97.                     } else { //左边放的下
  98.                         posX = x - boxWidth
  99.                     }
  100.                     if (y < boxHeight) { //上边放不开
  101.                         posY = 5
  102.                     } else { //上边放得下
  103.                         posY = y - boxHeight
  104.                     }
  105.                     return [posX, posY]
  106.                 }
  107.             },
  109.             /**
  110.              * tooltip格式化
  111.              * @param {Object} unit 数值后的单位
  112.              * @param {Object} formatFloat2 是否保留两位小数
  113.              * @param {Object} formatThousands 是否添加千分位
  114.              */
  115.             // this.numLeng==2
  116.             tooltipFormatter(unit, formatFloat2, formatThousands,formatFunDefeat,formatFunClue) {
  117.                 return params => {
  118.                     let result = ''
  119.                     var arrTip=[]
  120.                     unit = unit ? unit : ''
  121.                     for (let i in params) {
  122.                         let value = ''
  123.                         if (params[i].data !== null) {
  124.                             value = params[i].data
  125.                             // 保留两位小数
  126.                             if (formatFloat2) {
  127.                                 value = this.formatFloat2(value)
  128.                             }
  129.                             // 添加千分位
  130.                             if (formatThousands) {
  131.                                 value = this.formatThousands(value)
  132.                             }
  133.                             //战败量
  134.                             if(formatFunDefeat){
  135.                                 value=`<span style='color: #FFFFFF'>战败量：${params[i].value}</span> <br/>`
  136.                             }
  137.                             //线索量变化
  138.                             if(formatFunClue){
  139.                                     var res = ''
  140.                                     var sum = 0
  141.                                     var arrTip=[]
  142.                                     sum += params[i].value
  143.                                     res = `${params[i].marker} <span style='color: #FFFFFF'>${params[i].seriesName} : ${params[i].value}</span> <br/>`
  144.                                     arrTip.unshift(res)
  145.                                     if(i==params.length-1) {
  146.                                         res = `<span style='color: #FFFFFF'>总数 : ${sum}</span>`
  147.                                         arrTip.push(res)
  148.                                     }    
  150.                                     arrTip=arrTip.join().replace(/,/g,"");                            
  151.                             }
  152.                         }
  154.                         if(formatFunClue){
  155.                             value=arrTip
  156.                         }
  157.                         // #ifdef H5
  158.                         result +=  value
  159.                         // #endif
  161.                         // #ifdef APP-PLUS
  162.                         result += value
  164.                         // #endif
  165.                     }
  166.                     return result
  167.                 }
  169.             },
  172.             /**
  173.              * 保留两位小数
  174.              * @param {Object} value
  175.              */
  176.             formatFloat2(value) {
  177.                 let temp = Math.round(parseFloat(value) * 100) / 100
  178.                 let xsd = temp.toString().split('.')
  179.                 if (xsd.length === 1) {
  180.                     temp = (isNaN(temp) ? '0' : temp.toString()) + '.000'
  181.                     return temp
  182.                 }
  183.                 if (xsd.length > 1) {
  184.                     if (xsd[1].length < 2) {
  185.                         temp = temp.toString() + '0'
  186.                     }
  187.                     return temp
  188.                 }
  189.             },
  190.             /**
  191.              * 添加千分位
  192.              * @param {Object} value
  193.              */
  194.             formatThousands(value) {
  195.                 if (value === undefined || value === null) {
  196.                     value = ''
  197.                 }
  198.                 if (!isNaN(value)) {
  199.                     value = value + ''
  200.                 }
  201.                 let re = /\d{1,3}(?=(\d{3})+$)/g
  202.                 let n1 = value.replace(/^(\d+)((\.\d+)?)$/, function(s, s1, s2) {
  203.                     return s1.replace(re, '$&,') + s2
  204.                 })
  205.                 return n1
  206.             },
  207.             /**
  208.              * 战败量
  209.              * @param {Object} value
  210.              */
  211.             formatFunDefeat(data,value){
  212.                 console.log(data,value)
  213.                 let appdata=''
  214.                 if(this.numLeng==1){
  215.                     appdata= 'APP1'
  216.                 }else if(this.numLeng==2){
  217.                     appdata= '战败量：'+value
  218.                 }
  219.                 return appdata
  222.             }
  223.         }
  224.     }
  225. </script>
  227. <style lang="scss" scoped>
  228.     .echarts {
  229.         width: 100%;
  230.         height: 100%;
  231.     }
  232. </style>

创建echartsStackCon.vue，这里是我封装的一个 堆叠图组件
echartsData：是传递过来的数据

  1. <template>
  2.     <view>
  3.         <view class="clueQuantity_change_title">线索量变化</view>
  4.         <view class="clueQuantity_change" :style="{height: height+'rpx'}">
  5.             <view class="qiun-columns" style="overflow: hidden;">
  6.                 <slot></slot>
  7.                 <view><echarts :option="optionStackFun()" :numLeng='1' :style="{height: height+'rpx'}"></echarts></view>
  8.             </view>
  9.         </view>
  10.     </view>
  11. </template>
  13. <script>
  14. import echarts from '@/components/echarts/echarts.vue';
  15. export default {
  16.     data() {
  17.         return {
  18.             //堆叠柱状图数据
  19.             optionStack: {}, //堆叠柱状图配置
  20.             color: ['#FD5757', '#FECD2F', '#7CDEBC', '#3CB3D0', '#5D9BFC'],
  22.         };
  23.     },
  24.     props:{
  25.         echartsData:{
  26.             type:Object
  27.         },
  28.         height:{
  29.             type:String,
  30.             default:'420'
  31.         },
  32.     },
  33.     watch:{
  34.         echartsData(Val){
  36.             return Val
  37.         },
  38.     },
  39.     components: {
  40.         echarts
  41.     },
  42.     computed:{
  43.         level(){
  45.             let levelArr=[]
  46.             this.echartsData['series'].forEach((v,i)=>{
  47.                 levelArr.unshift(v.name)
  48.             })
  49.             return levelArr
  50.         },
  51.     },
  52.     created() {
  54.     },
  55.     methods: {
  57.         //堆叠柱状图数据
  58.         optionStackFun() {
  59.             console.log(this.echartsData,this.level,'-----------堆叠柱状图数据')
  60.             return {
  61.                 tooltip: {                 
  62.                     trigger: 'axis',
  63.                     confine:true,
  64.                     axisPointer: {
  65.                         // 坐标轴指示器，坐标轴触发有效
  66.                         type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
  67.                     },
  68.                     formatterStatus:true,//开启自定义
  69.                     formatFunClue:'formatFunClue',//对应echarts.vue
  70.                     backgroundColor: '#222222',
  71.                     extraCssText: 'box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.16);',
  72.                     //  formatter:function(data) {
  73.                     //     var res = ''
  74.                     //     var sum = 0
  75.                     //     var arrTip=[]
  76.                     //     data.forEach((item,index) => {
  77.                     //         sum += item.value
  78.                     //         res = `${item.marker} <span style='color: #FFFFFF'>${item.seriesName} : ${item.value}</span> <br/>`
  79.                     //         arrTip.unshift(res)
  80.                     //         if(index==data.length-1) {
  81.                     //             res = `<span style='color: #FFFFFF'>总数 : ${sum}</span>`
  82.                     //             arrTip.push(res)
  83.                     //         }    
  84.                     //     })
  85.                     //     arrTip=arrTip.join().replace(/,/g,"");
  86.                     //     return arrTip
  87.                     // }            
  88.                 },
  89.                 // color: this.color,
  90.                 legend: {
  91.                     data: this.level,
  92.                     left: 30,
  93.                     top:20,
  94.                     icon: "circle",
  95.                     itemGap: 20,
  96.                     itemWith:10,
  97.                     itemHeight:10
  98.                 },
  99.                 grid: {
  100.                     left: '3%',
  101.                     right: '4%',
  102.                     bottom: '3%',
  103.                     containLabel: true
  104.                 },
  105.                 xAxis: [
  106.                     {
  107.                         type: 'category',
  108.                         data: this.echartsData.categories,
  109.                         axisLine: {
  110.                             show: false
  111.                         },
  112.                         axisTick: {
  113.                             show: false
  114.                         }
  115.                     }
  116.                 ],
  117.                 yAxis: [
  118.                     {
  119.                         type: 'value',
  120.                         axisLabel: {
  121.                             show: true,
  122.                             interval: 'auto',
  123.                             // formatter: '{value} %'
  124.                         },
  125.                         show: true,
  126.                         axisLine: {
  127.                             show: false
  128.                         },
  129.                         axisTick: {
  130.                             show: false
  131.                         },
  132.                         splitLine: {
  133.                             show: false
  134.                         },
  135.                         splitLine: {
  136.                           lineStyle: {
  137.                             type: "dashed",
  138.                           },
  139.                           show: true,
  140.                         },
  141.                     }
  142.                 ],
  143.                 series: this.echartsData.series,        
  144.             };    
  146.         },
  148.     },
  150. };
  151. </script>
  152. <style scoped lang="scss">
  153. .clueQuantity_change_title {
  154.     font-size: 32rpx;
  155.     color: #43425d;
  156.     padding-left: 30rpx;
  157.     background-color: #f5f6fa;
  158.     width: 100%;
  159.     height: 80rpx;
  160.     line-height: 80rpx;
  161.     font-weight: 500;
  162. }
  163. .clueQuantity_change {
  164.     width: 100%;
  165.     height: 440rpx;
  166.     background-color: #ffffff;
  169. }
  170. </style>

echartsData数据格式

  1. {
  2.     "categories": [
  3.         "03/29"
  4.     ], 
  5.     "series": [
  6.         {
  7.             "name": "A级", 
  8.             "data": [
  9.                 3
  10.             ], 
  11.             "type": "bar", 
  12.             "stack": "stackone", 
  13.             "itemStyle": {
  14.                 "normal": {
  15.                     "color": "#7CDEBC"
  16.                 }
  17.             }, 
  18.             "barWidth": 20
  19.         }, 
  20.         {
  21.             "name": "H级", 
  22.             "data": [
  23.                 1
  24.             ], 
  25.             "type": "bar", 
  26.             "stack": "stackone", 
  27.             "itemStyle": {
  28.                 "normal": {
  29.                     "color": "#FECD2F"
  30.                 }
  31.             }, 
  32.             "barWidth": 20
  33.         }, 
  34.         {
  35.             "name": "O级", 
  36.             "data": [
  37.                 3
  38.             ], 
  39.             "type": "bar", 
  40.             "stack": "stackone", 
  41.             "itemStyle": {
  42.                 "normal": {
  43.                     "color": "#FD5757"
  44.                 }
  45.             }, 
  46.             "barWidth": 20
  47.         }
  48.     ]
  49. }

发表评论

表情：
评论列表 （有 0 条评论，694人围观）

还没有评论，来说两句吧...

相关阅读

    相关 echarts formatter用法

    ECharts 中 formatter 是一个格式化函数，用于格式化提示框(tooltip)和图例(legend)中的文本显示。其函数接收一些参数，返回格式化后的字符串，以在图

    快来打我*快来打我*/ 0 赞/ 164 阅读

    相关 echarts-formatter

    模板变量有 \{a\}, \{b\}，\{c\}，\{d\}，\{e\}，分别表示系列名，数据名，数据值等。 在 trigger 为 'axis' 的时候，会有多个系列的数据，

    梦里梦外;梦里梦外;/ 0 赞/ 188 阅读