数据可视化Echarts

Echarts的使用

具体的使用方法官网有很详细的文档，这里就不再多说了，这里只是简单的总结一些参数的用法

官方文档

饼图 南丁格尔图

Ajax异步加载数据

使用流程

1. 定义页面放置图形的容器

2. 引入ecahrts.min.js

3. 初始化echarts实例

   • var myChart = echarts.init(document.gentElementById("main"))

   • 这里可以选择主题light/dark，ecarts.init(dom, 'light')

4. 指定图表的各项参数配置和数据

   • option = {}

5. 给初始化的 echarts 实例指定各项参数和数据，可以调用已经定义好的 option 也可以自定义添加， 全局参数设置

   • myChart.setOption(option)

   • myChart.setOption({'backgroundColor': '#2c343c'})

option 中的参数介绍：

图形的样式：series -> type

• 柱状图： bar

• 饼图： pie

  • radius 半径

  • roseType : 'angle' 设置为南丁格尔图

• 散点图： scatter

• 线型图： line

图表的标题 title

• title: {text: '标题'}

图例 legend

• legend: {data: ["图例1"]}

X轴的标签 xAxis，y轴 yAxis

• xAxis: {data: ['标签1'， '标签2' ...]}

单个图标的设置： series

• name: 名称

• type：种类

• data: 数据

  • value 值

  • name 名称

• itemStyle 设置其他属性，如：阴影- shadowBlur shadowColor

官文目录，一定有你需要的

更多还是看官方文档，官方文档非常 nice