Echarts的配置与使用

来源：互联网发布：修改tomcat的端口号编辑：程序博客网时间：2024/05/20 13:17

最近因为项目需要用到图形，所以在网上搜了一下，发现echarts很实用，我们做网站/应用的时候，很多需要数据统计报表,接下来就分享一下我的第一个echarts

首先你需要下载开发包，建议去官网http://echarts.baidu.com/下载，选择需要的版本，开发环境建议选择源代码版本，该版本包含了常见的警告和错误提示。
1、下载ECharts源码，我这里下载的是2.2.7版本的，如果不知道哪下载，百度一下ECharts，然后就能看到官网了。
2、下载后，可以看到build文件夹，如果不是为了调测，可以直接使用dist文件夹下的。echarts.js和echarts-all.js区别在于后者已经把map.js打包进去了。如果网站上不用map，应该使用echarts.js，这样因为文件小能减少加载时间。
这里写图片描述
3、把build下的文件拷贝到你想要放的工程目录中，我拷贝进来后把dist改成了echarts

html代码

<!DOCTYPE html><html><head><meta charset="utf-8"><!-- 引入 ECharts 文件 -->    <script src="./echarts/echarts-all.js"></script></head><body> <div id="main" style="width: 600px;height:400px;"></div>    <script type="text/javascript">        var myChart = echarts.init(document.getElementById('main'));        // 指定图表的配置项和数据        var option = {            title : {                text : 'ECharts 入门示例'            },            tooltip : {},            legend : {                data : [ '销量' ]            },            xAxis : {                data : [ "衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子" ]            },            yAxis : {},            series : [ {                name : '销量',                type : 'bar',                data : [ 5, 20, 36, 10, 10, 20 ]            } ]        };        // 使用刚指定的配置项和数据显示图表。        myChart.setOption(option);    </script></body></html>

效果图如下：
这里写图片描述
第一个echarts就完成啦。

阅读全文

0 0