echarts图表示例

echarts.min.js文件：
链接：
https://pan.baidu.com/s/1FUzvvPH9huBrUfY3fEPHtw?pwd=2580

提取码：2580
使用echarts.min.js案例制作图表,需要从echarts网站下载示例；引入echarts.min.js文件本地化图表；否则引入的图表只能依赖网络环境；然后在代码中加入自己的数据即可

https://echarts.apache.org/zh/index.html

         <!DOCTYPE html>
        <html lang="zh-CN" style="height: 100%">
        <head>
          <meta charset="utf-8">
        </head>
        <body style="height: 100%; margin: 0">
          <div id="container" style="height: 100%"></div>
 
 
          <script type="text/javascript" src="echarts.min.js"></script>
          <!-- Uncomment this line if you want to dataTool extension
          <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5.3.2/dist/extension/dataTool.min.js"></script>
          -->
          <!-- Uncomment this line if you want to use gl extension
          <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts-gl@2/dist/echarts-gl.min.js"></script>
          -->
          <!-- Uncomment this line if you want to echarts-stat extension
          <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts-stat@latest/dist/ecStat.min.js"></script>
          -->
          <!-- Uncomment this line if you want to use map
          <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@4.9.0/map/js/china.js"></script>
          <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@4.9.0/map/js/world.js"></script>
          -->
          <!-- Uncomment these two lines if you want to use bmap extension
          <script type="text/javascript" src="https://api.map.baidu.com/api?v=3.0&ak=YOUR_API_KEY"></script>
          <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5.3.2/dist/extension/bmap.min.js"></script>
          -->
 
          <script type="text/javascript">
            var dom = document.getElementById('container');
            var myChart = echarts.init(dom, null, {
              renderer: 'canvas',
              useDirtyRect: false
            });
            var app = {};
 
            var option;
 
            option = {
          tooltip: {
            trigger: 'item'
          },
          legend: {
            top: '5%',
            left: 'center'
          },
          series: [
            {
              name: 'Access From',
              type: 'pie',
              radius: ['40%', '70%'],
              avoidLabelOverlap: false,
              label: {
                show: false,
                position: 'center'
              },
              emphasis: {
                label: {
                  show: true,
                  fontSize: '40',
                  fontWeight: 'bold'
                }
              },
              labelLine: {
                show: false
              },
              data: [
                { value: 1048, name: 'Search Engine' },
                { value: 735, name: 'Direct' },
                { value: 580, name: 'Email' },
                { value: 484, name: 'Union Ads' },
                { value: 484, name: 'Co Co' },
                { value: 300, name: 'Video Ads' }
              ]
            }
          ]
        };
 
            if (option && typeof option === 'object') {
              myChart.setOption(option);
            }
 
            window.addEventListener('resize', myChart.resize);
          </script>
        </body>
        </html>

posted @ 2022-05-17 09:46 爱豆技术部阅读(481) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

相关博文：

· 枚举案例；Enum

· PageHelper分页显示

· echarts入门实例

· Echarts入门教程精简实用系列

· 在线定制版eCharts

阅读排行：
· TypeScript + Deepseek 打造卜卦网站：技术与玄学的结合
· .NET Core 中如何实现缓存的预热？
· 阿里巴巴 QwQ-32B真的超越了 DeepSeek R-1吗？
· 如何调用 DeepSeek 的自然语言处理 API 接口并集成到在线客服系统
· 【译】Visual Studio 中新的强大生产力特性

公告

昵称：爱豆技术部
园龄： 3年5个月
粉丝： 2
关注： 1

+加关注

2025年3月

日

一

二

三

四

五

六

随笔档案 (213)

阅读排行榜

评论排行榜

1. IDEA激活密钥(永久)(1)

爱豆技术部

小幸运🤞

echarts图表示例

echarts图表示例

公告

常用链接

最新随笔

我的标签

积分与排名

随笔档案 (213)

阅读排行榜

评论排行榜

最新评论

	<!DOCTYPE html>
	<html lang="zh-CN" style="height: 100%">
	<head>
	<meta charset="utf-8">
	</head>
	<body style="height: 100%; margin: 0">
	<div id="container" style="height: 100%"></div>


	<script type="text/javascript" src="echarts.min.js"></script>
	<!-- Uncomment this line if you want to dataTool extension
	<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5.3.2/dist/extension/dataTool.min.js"></script>
	-->
	<!-- Uncomment this line if you want to use gl extension
	<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts-gl@2/dist/echarts-gl.min.js"></script>
	-->
	<!-- Uncomment this line if you want to echarts-stat extension
	<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts-stat@latest/dist/ecStat.min.js"></script>
	-->
	<!-- Uncomment this line if you want to use map
	<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@4.9.0/map/js/china.js"></script>
	<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@4.9.0/map/js/world.js"></script>
	-->
	<!-- Uncomment these two lines if you want to use bmap extension
	<script type="text/javascript" src="https://api.map.baidu.com/api?v=3.0&ak=YOUR_API_KEY"></script>
	<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5.3.2/dist/extension/bmap.min.js"></script>
	-->

	<script type="text/javascript">
	var dom = document.getElementById('container');
	var myChart = echarts.init(dom, null, {
	renderer: 'canvas',
	useDirtyRect: false
	});
	var app = {};

	var option;

	option = {
	tooltip: {
	trigger: 'item'
	},
	legend: {
	top: '5%',
	left: 'center'
	},
	series: [
	{
	name: 'Access From',
	type: 'pie',
	radius: ['40%', '70%'],
	avoidLabelOverlap: false,
	label: {
	show: false,
	position: 'center'
	},
	emphasis: {
	label: {
	show: true,
	fontSize: '40',
	fontWeight: 'bold'
	}
	},
	labelLine: {
	show: false
	},
	data: [
	{ value: 1048, name: 'Search Engine' },
	{ value: 735, name: 'Direct' },
	{ value: 580, name: 'Email' },
	{ value: 484, name: 'Union Ads' },
	{ value: 484, name: 'Co Co' },
	{ value: 300, name: 'Video Ads' }
	]
	}
	]
	};

	if (option && typeof option === 'object') {
	myChart.setOption(option);
	}

	window.addEventListener('resize', myChart.resize);
	</script>
	</body>
	</html>