关于ECharts的使用总结

ECharts拥有强大的数据可视化功能,而且使用非常便捷,下面做个总结:

 

第一步,导入库文件:

<script src="lib/echarts.min.js"></script>

第二步,创建一个放置图表的box:

<div style="width: 600px;height:400px"></div>

第三步,以该box为参数创建一个echarts实例:

var mCharts = echarts.init(document.querySelector("div"))

第四步,准备配置项,这里以条形图为例,包含最基本的三个选项:x轴、y轴和数据点。

    var option = {
      xAxis: {
        type: ‘category‘,
        data: [‘小明‘, ‘小红‘, ‘小王‘]
      },
      yAxis: {
        type: ‘value‘
      },
      series: [
        {
          name: ‘语文‘,
          type: ‘bar‘,
          data: [70, 92, 87]
        }
      ]
    }

第五步,将配置项设置给echarts实例对象。

mCharts.setOption(option)

最核心的步骤便是配置option对象了,这里面的细节数不胜数,必须参考文档,但是一些常用的配置还是有必要熟悉一下。

 

关于ECharts的使用总结

上一篇:366. Find Leaves of Binary Tree


下一篇:DELPHI正则表达式