vue中使用Highcharts绘制和弦图

1.下载

npm install highcharts --save

2.引入

import Highcharts from 'highcharts/highstock'
import HighchartsExporting from 'highcharts/modules/exporting'
import HighchartsOfflineExporting from 'highcharts/modules/offline-exporting'
import HighchartsSankey from 'highcharts/modules/sankey'
import HighchartsOldie from 'highcharts/modules/oldie'
import HighchartsDependencyWheel from 'highcharts/modules/dependency-wheel'
HighchartsExporting(Highcharts)
HighchartsOfflineExporting(Highcharts)
HighchartsSankey(Highcharts)
HighchartsOldie(Highcharts)
HighchartsDependencyWheel(Highcharts)

3.初始化和弦图

initEchart(val) {
      if (this.chart) {
        this.chart.destroy()
      }
      this.chart = Highcharts.chart('chart', {
        colors: this.colors,
        title: {
          text: ''
        },
        chart: {
          backgroundColor: 'transparent'
    },
        credits: {
          enabled: false // 右下角版权信息
        },
        navigation: {
          // 右上角导出按钮组
          buttonOptions: {
            enabled: false
          }
        },
        series: [
          {
            keys: ['from', 'to', 'weight'],
            data: val.body.map(item => [item.name, item.target, parseFloat(item.value)]),
            type: 'dependencywheel',
            name: '',
            dataLabels: {
              color: '#defeff',
              textPath: {
                enabled: true,
                attributes: {
                  dy: 5
                }
              },
              distance: 10
            },
            size: '95%'
          }
        ]
      })
    }

4.图片导出

this.chart.exportChartLocal()

5.数据更新

this.chart.series[0].setData(nelVal.body.map(item => [item.name, item.target, parseFloat(item.value)]))

6.注意事项

1.Highcharts 需要的数据必须是数值类型，在 JS 中可以通过 parseInt 和 parseFloat 来讲字符串转换成数值类型，图出不来的时候可以优先考虑这个问题。