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

Logo

权威|前沿|技术|干货|国内首个API全生命周期开发者社区

更多推荐