这是我参与8月更文挑战的第3天，活动详情查看：8月更文挑战

常见数据可视化工具

	兼容性	费用	渲染引擎	难易程度
echarts	IE6+、主流	免费	Canvas/SVG	-
Highcharts	IE6+、主流	1年后收费	SVG	-
AntV	IE9+、主流	免费	Canvas	-
d3.js (Data-Driven Documents)	IE9+、主流	免费	Canvas/SVG	相对复杂

D3图表类型非常丰富，几乎可以满足所有开发需求，但代码相对会稍微难一点。

如果你能力很强或事件充裕，可以直接用D3。如果你是一个初学者或对于数据可视化没那么熟悉，数据量较大可以考虑Echarts；只是一些简单的数据，且客户对界面定制较多，则可以考虑使用highcharts；

推荐一篇D3.js的文章：zhuanlan.zhihu.com/p/353533127

力引导关系图：

• AntV-G6
• d3
• echarts
• Highcharts

综合考虑了社区成熟度，易上手程度，配置灵活度，及渲染引擎，最终选择了echarts

echarts 配置

关系图

let option = {
        color: new echarts.graphic.LinearGradient(0, 1, 1, 1, [
          { offset: 0, color: commen_color },
          { offset: 1, color: '#000' }
        ]), // 图例的填充色
        tooltip: {},
        legend: [
          {
            // selectedMode: 'single',
            data: data.categories.map((a) => {
              return {
                name: a.name,
                textStyle: { color: '#FFFDFE' },
                icon: 'circle' // 图例形状设置
              };
            })
          }
        ],
        animationDuration: 0,
        animationEasingUpdate: 'quinticInOut',
        series: [
          {
            type: 'graph',
            layout: 'force',
            data: data.nodes,
            links: data.links,
            categories: data.categories,
            roam: true,
            force: {
              edgeLength: 150,
              repulsion: 200,
              gravity: 0.05,
              friction: 0.6
            },
            label: {
              position: 'right',
              formatter: '{b}'
            },
            lineStyle: {
              color: 'source',
              curveness: 0 // 连接线的弯曲程度，0为直线
            },
            emphasis: {
              focus: 'adjacency',
              lineStyle: {
                width: 1 //连接线hover时的宽度
              }
            }
          }
        ]
      };

雷达图

const detailOption = {
  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
    { offset: 0, color: commen_color },
    { offset: 1, color: '#327dd4' }
  ]), // 边框颜色
  textStyle: {
    color: [commen_color],
    fontSize: 12
  },
  title: { show: false },
  legend: {
    show: false
  },
  polar: [
    {
      splitNumber: 1,
      center: ['50%', '50%'], // 图的位置
      indicator: [
        { text: '指标1', max: 100 },
        { text: '指标2', max: 100 },
        { text: '指标3', max: 100 },
        { text: '指标4', max: 100 }
      ],
      radius: 100,
      axisLine: {
        // 坐标轴线
        show: true, // 默认显示，属性show控制显示与否
        lineStyle: {
          type: 'dashed' //虚线
        }
      },

      axisLabel: {
        // 坐标轴文本标签，详见axis.axisLabel
        show: false,
        textStyle: {
          color: commen_color // 坐标轴刻度文字的样式
        }
      },
      splitArea: {
        show: true,
        areaStyle: {
          color: ['#000'] // 图表背景网格的颜色
        }
      },

      splitLine: {
        show: true,
        lineStyle: {
          width: 1,
          color: commen_color // 图表背景网格线的颜色
        }
      }
    }
  ],
  series: [
    {
      type: 'radar',
      lineStyle: {
        width: 1 // 图表中各个图区域的边框线颜色
      },
      symbol: 'none', // 去除拐点
      areaStyle: {},
      data: [
        {
          value: [75, 60, 50, 95],
          name: '预算'
        }
      ]
    }
  ]
};

事件events & 动作actions

• events：'click'、'dblclick'、'mousedown'、'mousemove'、'mouseup'、'mouseover'、'mouseout'、'globalout'、'contextmenu'

// 单击
myChart.on('click', (params) => {
    console.log(params)
});
// 双击
myChart.on('dblclick', (params) => {
    console.log(params)
});

• actions：myChart.dispatchAction({ type: '' })，统一管理所有动作

setInterval(function () {
    var dataLen = option.series[0].data.length;
    // 取消之前高亮的图形
    myChart.dispatchAction({
        type: 'downplay',
        seriesIndex: 0,
        dataIndex: app.currentIndex
    });
    app.currentIndex = (app.currentIndex + 1) % dataLen;
    // 高亮当前图形
    myChart.dispatchAction({
        type: 'highlight',
        seriesIndex: 0,
        dataIndex: app.currentIndex
    });
    // 显示 tooltip
    myChart.dispatchAction({
        type: 'showTip',
        seriesIndex: 0,
        dataIndex: app.currentIndex
    });
}, 1000);