echarts是一个具有千万级数据可视化渲染能力,SVG + Canvas 双引擎的神器。
它的官方网址为:http://www.echartsjs.com/index.html ,有各种饼状图、树状图、折线图……而且有很多的官方demo,我们可以直接在线修改,动态查看是否符合自己的需要,然后下载~
主要是记录自己使用echarts遇到的一些坑,希望会对自己回顾和同样问题的朋友有所帮助。
加载自己的data数据
echart主要是通过legend对象来存放图例,通过series对象来存放需要展示的数据。
以饼状图为例,从官网打开一个饼状图的demo可以看到如下所示的关键代码:
option = {
title: {
text: '天气情况统计',
subtext: '虚构数据',
left: 'center'
},
tooltip : {
trigger: 'item',
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
legend: {
// orient: 'vertical',
// top: 'middle',
bottom: 10,
left: 'center',
data: ['西凉', '益州','兖州','荆州'