哪位兄弟用过echarts.js这个东西做过图表的

海星吧 2020-3-24 4325

今天快下班了,水了一天,想起之前有个项目是要表格的。

于是突发奇想,做一个jojo替身使者能力表。

但是有点小问题,

我把这个图表的数据挂载上去,但是我想格式化一下上图中series.data.value在图表上的显示。

5到1为A到E的这样的。

网上搜了,但是没有找到数据转换的API。

哪位老哥晓得记得打call。


弱鸡程序员年底还在加班
最新回复 (2)
  • 海星吧 2020-3-25
    0 2

    111.png

    弱鸡程序员年底还在加班
  • 海星吧 2020-3-25
    0 3

    行吧,搞好了,我还是看漏了,如果要改的话是得自己写标签的。
    sbf(value) {
                                   let arr = 'ABCDE'.split("").reverse().join('')
                                   return arr.charAt(value)
                           },

    const stand = echarts.init(this.$refs.echartContainer);
                                   stand.setOption({
                                           title: {
                                                   text: that.aname
                                           },
                                           tooltip: {
                                                   trigger: "item",
                                                   //主要是 formatter这个函数是更改提示框里面的数据的
                                                   formatter: function(params) {
                                                           let List = [];
                                                           let Item = '';
                                                           let name = that.name
                                                           let value = params.value;
                                                           for (let i = 0; i < value.length; i++) {
                                                                   let a = value[i] - 1;
                                                                   List.push('<p style="width:80px;display: flex; justify-content: space-between;">' +
                                                                           '<span>' + name[i] + ':</span><span>' + that.sbf(a) + '</span></p>')
                                                           }
                                                           Item = List.join('')
                                                           return '<div class="tooltip">' + Item + '</div>'
                                                   }
                                           },
                                           radar: {
                                                   name: {
                                                           textStyle: {
                                                                   color: '#fff',
                                                                   backgroundColor: '#999',
                                                                   borderRadius: 3,
                                                                   padding: [3, 5]
                                                           }
                                                   },
                                                   radius: 90, //大小
                                                   // startAngle: 45,//旋转角度
                                                   splitNumber: 5,
                                                   center: ['50%', '50%'],
                                                   indicator: [{
                                                                   name: '破坏力',
                                                                   max: 5,
                                                                   axisLabel: {
                                                                           show: true
                                                                   },
                                                           },
                                                           {
                                                                   name: '速度',
                                                                   max: 5
                                                           },
                                                           {
                                                                   name: '射程',
                                                                   max: 5
                                                           },
                                                           {
                                                                   name: '持久度',
                                                                   max: 5
                                                           },
                                                           {
                                                                   name: '精密动作',
                                                                   max: 5
                                                           },
                                                           {
                                                                   name: '可成长性',
                                                                   max: 5
                                                           },

                                                   ]
                                           },
                                           series: [{
                                                   name: 'stand',
                                                   type: 'radar',
                                                   data: [{
                                                           // name:that.aname,
                                                           value: that.avalue
                                                   }]
                                           }]
                                   });

    弱鸡程序员年底还在加班
    • ACG里世界
      4
          
返回
发新帖