阅读 90

数据可视化-用echarts实现关系图和雷达图

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

常见数据可视化工具

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

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

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

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

力引导关系图:

综合考虑了社区成熟度,易上手程度,配置灵活度,及渲染引擎,最终选择了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);
复制代码
文章分类
前端