首页 > 其他分享 >EchartS使用文档

EchartS使用文档

时间:2023-07-14 15:23:08浏览次数:32  
标签:name EchartS myChart ec ECharts 文档 使用 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,就可看到以下效果

标签:name,EchartS,myChart,ec,ECharts,文档,使用,echarts,加载
From: https://www.cnblogs.com/HeroZhang/p/17553789.html

相关文章

  • markdown使用技巧
    注意这些用的时候都要用$$标签包裹,居中单独一行显示的话用$$$$包裹1除法用这个:$\frac{分子}{分母}$\[\frac{分子}{分母}\]2上标和下标用这个:$X^2_i$\[X^2_i\]3不等号用这个:$\ne$\[\ne\]4累加用这个:$\sum_{i=1}^n{i}$\[\sum_{i=1}^n{i}\]5小于,大于用这个:$\le$......
  • 在时序电路中使用阻塞赋值会怎样
    阻塞赋值的使用如之前介绍所述,建议使用阻塞赋值来描述组合逻辑设计。但是,如果在编码时序逻辑行为时使用阻塞赋值,会发生什么?这是需要解决的最重要的问题之一,对后续讨论很重要。如果阻塞赋值用于编码时序逻辑的行为,则可以观察到综合结果不是正确的功能设计意图。接下来介绍使用......
  • dede ckeditor编辑器让上传图片自动使用绝对地址显示
    dedecmsckeditor编辑器让上传图片自动使用绝对地址显示,本教程适合织梦cmsv57,其他版本未测试。由于我们网站为了更好更有效的解决seo方案,于是在考虑到发布文章的时候,上传的正文图片,是非绝对路径的,于是我们把织梦cms默认编辑器ckeditor进行了小幅度的修改:首先我们打开织梦安装在......
  • dede去掉列表推荐文档的粗体字效果的修改方法
    这样看起来多么的不美观了,现在我们本帖教程就是去掉列表这个粗体字效果。DedeCMSv5.6具体操纵方法如下:找到/include/arc.listview.class.php打开找到743-746行下列代码:if(ereg('c',$row['flag'])){$row['title']="<b>".$row['title']."</b>"......
  • 微擎开发使用workerman时,使用微擎pdo_xxx提示MySQL server has gone away解决办法
    微擎开发使用workerman时,使用微擎pdo_xxx提示MySQLserverhasgoneaway解决办法#找到微擎的DB类ramework\class\db.class.phppublicfunctionreConnect($errorInfo,$params){ if(in_array($errorInfo[1],array(1317,2013))){ $this->pdo=null; $this->conne......
  • fastapi框架docs文档Responses去掉默认的异常响应422Validation Error
    fastapi框架原生docs的Responses中会有个默认的422ValidationError响应,但大多数实际开发应该不需要,如何去除呢?我用的方法是用猴子补丁重写fastapi.openapi.util里的get_openapi_path方法,去掉加入默认422的那段代码即可,下面这些http422=str(HTTP_422_UNPROCESSABLE_ENTITY)......
  • finalshell工具连接centos 8.5 的使用步骤
    1.打开工具先修改快捷方式    2、连接     3、......
  • 【报错解决】使用代理后从Github中clone仓库报错
    当电脑使用代理后,会造成Github的clone和push等功能无法正常使用报错内容:PSD:\Github>gitclonehttps://github.com/sige5193/bittly.gitCloninginto'bittly'...fatal:unabletoaccess'https://github.com/sige5193/bittly.git/':Failedtoconnecttogithub.com......
  • 使用Python进行文件复制
    一、序公司有部分内网电脑文件转到有网电脑二、解决思路通过共享地址将文件转到其他电脑上三、解决步骤1、先在我的电脑,输入电脑地址,输入账户密码点击记住凭证2.实现代码如下展开代码importshutilimportos#将需要的文件拷到需要的路径......
  • httplib 库介绍与使用
    说明:cpp-httplib是个开源的库,是一个c++封装的http库,使用这个库可以在linux、windows平台下完成http客户端、http服务端的搭建,这是一个多线程“阻塞”HTTP库。使用起来非常方便,只需要包含头文件httplib.h即可。源码库地址:https://github.com/yhirose/cpp-httplib httplib......