首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > Web前端 >

怎么快速使用ECharts绘制可视化图表

2013-10-08 
如何快速使用ECharts绘制可视化图表1.在ECharts官网,下载ECharts的源码和示例文件。2.解压缩下载下来的Echa

如何快速使用ECharts绘制可视化图表

1.在ECharts官网,下载ECharts的源码和示例文件。

怎么快速使用ECharts绘制可视化图表


2.解压缩下载下来的Echars压缩包,找到doc\example\www\echartsjs目录,将里面的js文件全部取出来,放到项目js目录文件夹下。

怎么快速使用ECharts绘制可视化图表

3.在页面的顶端引入模块加载器esl.js。


1<script src=\'#\'" /esl.js"></script>


4.为ECharts准备一个具备大小的Dom。


1<div id="chartArea" style="height:500px;border:1px solid #ccc;padding:10px;"></div>


5.为模块加载器配置echarts的路径,从当前页面链接到echarts.js,定义所需图表路径。


1234567require.config({        paths:{            echarts:'./js/echarts',            'echarts/chart/bar' './js/echarts',            'echarts/chart/line''./js/echarts'        }    });


6.动态加载echarts然后在回调函数中开始使用,注意保持按需加载结构定义图表路径


12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455require(        [            'echarts',            'echarts/chart/bar',            'echarts/chart/line'        ],        function(ec) {            var myChart = ec.init(document.getElementById('main'));            var option = {                tooltip : {                    trigger: 'axis'                },                legend: {                    data:['蒸发量','降水量']                },                toolbox: {                    show : true,                    feature : {                        mark : true,                        dataView : {readOnly: false},                        magicType:['line''bar'],                        restore : true,                        saveAsImage : true                    }                },                calculable : true,                xAxis : [                    {                        type : 'category',                        data : ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月']                    }                ],                yAxis : [                    {                        type : 'value',                        splitArea : {show : true}                    }                ],                series : [                    {                        name:'蒸发量',                        type:'bar',                        data:[2.04.97.023.225.676.7135.6162.232.620.06.4,3.3]                    },                    {                        name:'降水量',                        type:'bar',                        data:[2.65.99.026.428.770.7175.6182.248.718.86.0,2.3]                    }                ]            };                                                          myChart.setOption(option);        }    );

7.效果图

怎么快速使用ECharts绘制可视化图表

8.注意事项

  在实际项目中,ECharts图标的横坐标和纵坐标,均是在后台返回的数据中的得到的。在前端动态设置data数值时,data的类型必须是数组,EChars才能展现出图标的效果来。

热点排行