EchartS使用文档

EchartS使用文档

1.新建一个echarts.html文件，为ECharts准备一个具备大小（宽高）的Dom。

<!DOCTYPE html>
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
</head>
 
<body>
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="height:400px"></div>
</body>

2.新建 <script>标签引入模块化单文件echarts.js

<!DOCTYPE html>
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
</head>
<body>
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="height:400px"></div>
    <!-- ECharts单文件引入 -->
    <script src="http://echarts.baidu.com/build/dist/echarts.js"></script>
</body>

3.新建 <script>标签中为模块加载器配置echarts和所需图表的路径（相对路径为从当前页面链接到echarts.js）

<!DOCTYPE html>
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
</head>
<body>
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="height:400px"></div>
    <!-- ECharts单文件引入 -->
    <script src="http://echarts.baidu.com/build/dist/echarts.js"></script>
    <script type="text/javascript">
        // 路径配置
        require.config({
            paths: {
                echarts: 'http://echarts.baidu.com/build/dist'
            }
        });
    </script>
</body>

4. <script>标签内动态加载echarts和所需图表，回调函数中可以初始化图表并驱动图表的生成

<!DOCTYPE html>
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
</head>
<body>
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="height:400px"></div>
    <!-- ECharts单文件引入 -->
    <script src="http://echarts.baidu.com/build/dist/echarts.js"></script>
    <script type="text/javascript">
        // 路径配置
        require.config({
            paths: {
                echarts: 'http://echarts.baidu.com/build/dist'
            }
        });
        
        // 使用
        require(
            [
                'echarts',
                'echarts/chart/bar' // 使用柱状图就加载bar模块，按需加载
            ],
            function (ec) {
                // 基于准备好的dom，初始化echarts图表
                var myChart = ec.init(document.getElementById('main')); 
                
                var option = {
                    tooltip: {
                        show: true
                    },
                    legend: {
                        data:['销量']
                    },
                    xAxis : [
                        {
                            type : 'category',
                            data : ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
                        }
                    ],
                    yAxis : [
                        {
                            type : 'value'
                        }
                    ],
                    series : [
                        {
                            "name":"销量",
                            "type":"bar",
                            "data":[5, 20, 40, 10, 10, 20]
                        }
                    ]
                };
        
                // 为echarts对象加载数据 
                myChart.setOption(option); 
            }
        );
    </script>
</body>

5.浏览器中打开echarts.html，就可看到以下效果

6.饼图示例代码浏览器中打开，就可看到以下效果

<!DOCTYPE html>
<head>
    <meta charset="gb2312">
    <title>ECharts</title>
</head>
<body>
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="height:400px"></div>
    <!-- ECharts单文件引入 -->
    <script src="http://echarts.baidu.com/build/dist/echarts.js"></script>
    <script type="text/javascript">
        // 路径配置
        require.config({
            paths: {
                echarts: 'http://echarts.baidu.com/build/dist'
            }
        });
        // 使用
        require(
            [
                'echarts',
                'echarts/chart/pie' // 使用柱状图就加载bar模块，按需加载
            ],
            function (ec) {
                // 基于准备好的dom，初始化echarts图表
                //var myChart = ec.init(document.getElementById('main')); 
				var myChart = ec.init(document.getElementById('main'),'macarons'); //内置主题（'macarons', 'infographic'）
					var option = {
 
		tooltip : {
			trigger: 'item', //可选为：'item' | 'axis'
			formatter: "{b} : {c} ({d}%)" //a（系列名称），b（数据项名称），c（数值）, d（饼图：百分比）
		},
		legend: {
			padding : [40,0,0,0],
			orient : 'horizontal', //布局方式，默认为水平布局，可选为：'horizontal' | 'vertical'
			x : 'center',
			data:['小区总数','楼栋总数','房屋总数']
		},
		
		/* calculable : true, //是否启用拖拽重计算特性，默认关闭  */
		series : [
			{
				name:'地',
				type:'pie',
				radius : '55%',
				center: ['50%', '55%'], 
				data: [
					{value:12, name:'小区总数'},
					{value:23, name:'楼栋总数'},
					{value:34, name:'房屋总数'},
				]
			}
		]
	};
                // 为echarts对象加载数据 
                myChart.setOption(option); 
            }
        );
    </script>
</body>

7.浏览器中打开echarts.html，就可看到以下效果

posted @   冀未然  阅读(396)  评论(0)  编辑  收藏  举报
（评论功能已被禁用）
相关博文：
· 在pyside中显示pyecharts图形
· Excel创建目录
· 关于Echarts
· 如何使用Echarts实现饼图？
· echarts入门实例
阅读排行：
· 分享4款.NET开源、免费、实用的商城系统
· 全程不用写代码，我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了，比商业数据库还牛
· 记一次.NET内存居高不下排查解决与启示
· 白话解读 Dapr 1.15：你的「微服务管家」又秀新绝活了
点击右上角即可分享
微信分享提示