echart百度图表使用方法

最近几个项目都是有关图表,在国内echart和国外highchart比较,还是比较倾向于使用echart做可视化,echart是完全开源,配置项文档非常详细。

创建html文档,设置好DOM,给节点设置width和height

步骤1

引入echart.min.js文件

步骤2

配置echarts和折线图

echart百度图表使用方法_第1张图片
步骤3

(1)require.config是用来设置echarts的配置文件,配置好本地echarts文件路径。(2)关于第二个require,这里是用来设置要表。除了第一个‘echarts’必要引用外,还要引用所需要显示的图。例如,我们这个表用到的是柱状图,所以要引用bar,那么如果我们要引用折线图,那么就要引用line了,依次类推,具体可以看官方文档。

对获取得到的id进行echarts初始化

echart百度图表使用方法_第2张图片
步骤4

重点是option里的设置,设置坐标轴、设置数据。

echart百度图表使用方法_第3张图片
步骤5

数据显示有断开,在series中label加上formatter方法

echart百度图表使用方法_第4张图片
步骤6

y轴上的超过1000,显示千。在axisLabel中增加formatter方法

echart百度图表使用方法_第5张图片
步骤7

最终可视化

echart百度图表使用方法_第6张图片

你可能感兴趣的:(echart百度图表使用方法)