零云技术分享之:ECharts可视化图表开发

CoreThink 发布于 2017/03/06 10:59
阅读 255
收藏 1

欢迎交流:零云,互联网产品快速开发框架

 

百度有几个开源项目值得称赞的,比如blend2、UEditor、ECharts 等,这里我们聊一聊ECharts3 可视化图表库。

 

有了ECharts 3,我们可以非常方便的构建出折线图(区域图)、柱状图(条状图)、散点图(气泡图)、饼图(环形图)、K线图、地图、力导向布局图以及和弦图等。最新的3.4版本还支持象形柱图、主题河流图、水球图等个性化图表

 

和UEditer 一样,ECharts使用非常简单:

1.     首先,我们在http://echarts.baidu.com/download.html 下载ECharts源代码。正常使用下载“常用”版本即可。

2.     在你的HTML中引用ECharts

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

3.     为ECharts准备一个DOM

<div id="echarts1"></div>

可以通过CSS来设定width 和 height

4.     初始化Echarts实例

var myChart1 = echarts.init(document.getElementById('echarts1'));

[注意:一定要在调用echarts.min.js完成后才能初始化]

5.     创建数据

var option1 = {

    tooltip: { // 坐标轴触发

        trigger: 'axis'

    },

    legend: { //设置项目

        data:['第1分店','第2分店']

    },

    xAxis:  { //设置横坐标

        type: 'category',

        boundaryGap: false,

        data: ['02月27日','02月28日','03月01日','03月02日','03月03日',]

    },

    yAxis: { //设置纵坐标

        type: 'value',

        axisLabel: {

            formatter: '{value} 单'

        }

    },

    series: [ //导入数据

        {name:'第1分店',type:'line',stack: '总量',areaStyle: {normal: {}},data:[37,23,47,45,11,]},

        {name:'第2分店',type:'line',stack: '总量',areaStyle: {normal: {}},data:[54,34,43,39,37,]},

    ]

};

6.     显示 将数据导入到图表

myChart1.setOption(option1);

 

另外,ECharts还有丰富的主题可供下载:http://echarts.baidu.com/download-theme.html

如果数据量较多,可以使用AJAX方法导入第5步的数据,可以明显提升页面访问速度,获得更好的访问体验。
 

欢迎交流:零云,互联网产品快速开发框架

加载中
返回顶部
顶部