本地搭建ECharts环境
1、官网下载完整js包
2、本地新建文件夹，并拷贝下载的ECharts包到js文件夹
3、在IDE打开文件夹，并新建html页面。（此处用的是VSCode）
4、在html页面引入js包，<script src="js/echarts.min.js"></script>
并创建div用于显示ECharts控件，设置div大小，<div id="chart1" style="width:600px;height:700px"></div>
并初始化ECharts控件到div，var a = echarts.init(document.getElementById("chart1"));
5、然后从ECharts官网拷贝demo代码粘贴
6、给初始化的ECharts控件设置option
到此本地化一个ECharts控件就创建好了，运行html页面即可。
附first demo Code：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="js/echarts.min.js"></script>
</head>
<body>
<div id="chart1" style="width:600px;height:700px"></div>
</body>
<script>
var a = echarts.init(document.getElementById("chart1"));
option = {
title: {
text: '饼图程序调用高亮示例',
x: 'center'
},
tooltip: {
trigger: 'item',
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
legend: {
orient: 'vertical',
left: 'left',
data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎']
},
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: '搜索引擎' }
],
itemStyle: {
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
};
a.setOption(option);
//设置默认选中高亮部分
a.dispatchAction({
type: 'highlight',
seriesIndex: 0,
dataIndex: 4
});
</script>
</html>
5199
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
