鍍金池/ 問答/Linux  HTML/ echarts在小程序中如何動(dòng)態(tài)的設(shè)置數(shù)據(jù)值

echarts在小程序中如何動(dòng)態(tài)的設(shè)置數(shù)據(jù)值

這是我的小程序中的echarts 代碼,頁面已經(jīng)獲取到數(shù)據(jù),也通過setData寫到data里了
clipboard.png

現(xiàn)在想問,如何把這個(gè)teamname中的value 寫入到echarts的data中去?

function initChart(canvas, width, height) {
  const chart = echarts.init(canvas, null, {
    width: width,
    height: height
  });
  canvas.setChart(chart);

  var option = {
    radar: {
      indicator: [{
        text: '攻擊',
        max: 100
      },
      {
        text: '速度',
        max: 100
      },
      {
        text: '身體',
        max: 100
      },
      {
        text: '防守',
        max: 100
      },
      {
        text: '組織',
        max: 100
      }
      ],
      center: ['50%', '50%'],
      radius: '50%',
      startAngle: 90,
      splitNumber: 0,
      shape: 'polygon',
      name: {
        formatter: '【{value}】',
        textStyle: {
          color: '#72ACD1'
        }
      },
      splitArea: {
        areaStyle: {
          color: ['#D3D3D3']
        }
      },
      axisLine: {
        lineStyle: {
          color: 'rgba(255, 255, 255, 0.4)'
        }
      }
    },
    series: [{
      type: 'radar',
      data: [],
      itemStyle: {
        normal: {
          areaStyle: {
            type: 'default',
            color: "#EA6A69",
            opacity: 0.5
          }
        }
      },
    }]
  }
  chart.setOption(option);
  return chart;
}
回答
編輯回答
臭榴蓮

http://bestvayne.github.io/20...

最后還是參考了Echart的官方文檔,以及小程序的官方文檔,用chartOption方法將獲取的數(shù)據(jù)插入到UI中

2018年6月23日 23:37
編輯回答
墨小羽

onLoad: function (options) {

this.barComponent = this.selectComponent('#mychart-dom-bar');
this.init_bar(token);

}
init_bar: function (token) {

this.barComponent.init((canvas, width, height) => {
  const barChart = echarts.init(canvas, null, {
    width: width,
    height: height
  });
  wx.request({
    url: config.maintenance + 'GetRemainMoneyStatistics?token=' + token,
    method: "POST",
    dataType: "JSON",
    success: (res) => {
      var moneys = JSON.parse(res.data);
      var option = {
        backgroundColor: "#ffffff",
        color: ["#37d6b7", "#ffc655"],
        legend: {
          x: 'right',
          y: 'center',
          orient: 'vertical',
          data: [{
            name: '活期存款',
            textStyle: {
              color: '#666666'
            }
          },
          {
            name: '資金增值',
            textStyle: {
              color: '#666666'
            }
          }]
        },
        graphic: {
          type: 'text',
          left: '30%',
          top: 'center',
          style: {
            text: '留存率\n  10%',
            fill: '#000',
          }
        },
        series: [{
          type: 'pie',
          center: ['36%', '50%'],
          radius: ['40%', '60%'],
          label: {
            normal: {
              show: true,
              formatter: "\n(l15dz7p%)"
            },
          },
          labelLine: {
            normal: {
              show: true,
              length: 8,
              length2: 4,
            }
          },
          data: [{
            value: moneys.Current,
            name: '活期存款',
          }, {
              value: moneys.ValueAdded,
            name: '資金增值'
          }
          ],
        }]
      };
      barChart.setOption(option);
    }
  });   
  return barChart;
});

},

2017年11月3日 02:27
編輯回答
墨染殤

怎么解決的問題啊

2017年2月11日 06:56
編輯回答
亮瞎她

樓主是怎么解決的,我也遇到了

2018年5月27日 00:08