一步一步教你用 echarts

最新推荐文章于 2024-12-05 10:25:56 发布

罗汉松驻扎的工作基地

最新推荐文章于 2024-12-05 10:25:56 发布

阅读量1.1k

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/MFCdestoryer/article/details/42153319

本文详细介绍了如何使用ECharts绘制饼图，包括设置图表样式、配置数据源等关键步骤，并提供了一个完整的示例代码。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一步一步教你用 echarts

首先上 http://echarts.baidu.com/index.html
下载这个文档

解压后找到文件夹：
****\echarts-2.1.10\doc\example\www\js
会发现里面有echarts文件夹以及echarts.js
这个插件最主要就是用这些东西了
另外：用build文件夹里面的也可以，我习惯用example里面的文件，
自己选择吧！

然后就是建立一个工程项目（jsp的也好，asp.net也行，什么网站都可以），
把上面说的文件放进去，

下面给一段例子：

<html>
<head>
<title>Index</title>


<link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css">


<link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap-theme.min.css">


<script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>


<script src="http://cdn.bootcss.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>

</head>
<body>
<div>
<div id="main" style="height:400px;"></div>
</div>


<script src="../../Scripts/echarts/echarts.js" type="text/javascript"></script>


<script type="text/javascript">

require.config({
paths: {
echarts: '/Scripts/echarts' //这句话的意思是你的echarts.js放在哪里
}
});
require(
[
'echarts',
'echarts/chart/line', //这里的意思是你要用到哪一些图形，比如折线、柱状、饼状
'echarts/chart/bar',
'echarts/chart/pie'
],
function (ec) {
var myChart = ec.init(document.getElementById('main'));

var option = {
title: {
text: '某站点用户访问来源',
subtext: '纯属虚构',
x: 'center'
},
tooltip: {
trigger: 'item',
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
legend: {
orient: 'vertical',
x: 'left',
data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎']
},
toolbox: {
show: true,
feature: {
mark: { show: true },
dataView: { show: true, readOnly: false },
magicType: {
show: true,
type: ['pie', 'funnel'],
option: {
funnel: {
x: '25%',
width: '50%',
funnelAlign: 'left',
max: 1548
}
}
},
restore: { show: true },
saveAsImage: { show: true }
}
},
calculable: true,
series: [
{
name: '访问来源',
type: 'pie',
radius: '55%',
center: ['50%', '60%'],
data: [
{ value: 335, name: '直接访问' },
{ value: 310, name: '邮件营销' },
{ value: 234, name: '联盟广告' },
{ value: 135, name: '视频广告' },
{ value: 1548, name: '搜索引擎' }
]
}
]
};

myChart.setOption(option);
}
);

</script>

</body>
</html>