ECharts3的完整攻略
ECharts是一个基于JavaScript的开源可视化库，可以用于创建各种交互式图表和地图。ECharts3是ECharts的第三个版本，提供了更多的表类型和功能。以下是使用ECharts3的完整攻略：
步骤1：下载ECharts3
可以从ECharts官网（https://ech.apache.org/zh/index）下载ECharts3。下载，将echarts.min.js文件复制到项目文件夹中。
步骤2：创建HTML文件
在项目文件夹中创建一个HTML文件，并在文件中添加以下代码：
<!DOCTYPE html>
<html>
>
<meta charset="utf-8">
<title>ECharts3 Demo</title>
<script src="echarts.min.js"></script>
</head>
<body>
<div id="chart" style="width: 600px;height:400px;"></div>
<script>
// 在这里编写JavaScript代码
</script>
</body>
</html>
上面的代码创建了一个包含一个div元素的HTML文件，用于显示图表。在div元中，属性为“chart”，宽度为600像素，高度为400像素。在head元素引入了ECharts3的JavaScript文件。
步骤3：创建图表
在JavaScript代码块中，可以使用ECharts3创建各种图表。以下是一个创建柱状图的示例代码：
var chart = echarts.init(document.getElementById('chart'));
var option = {
title: {
text: '柱状图示例'
},
tooltip: {},
legend: {
data:['销量']
},
xAxis: {
data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
},
yAxis: {},
series: [{
name: '销量',
type: 'bar',
data: [5, 20 36, 10, 10, 20]
}]
};
chart.setOption(option);
上面的代码创建了一个柱状图，用于显示销售数据。在option对象中，设置了图表的标题、提示框、图例、x轴、y轴和数据系列。最后，chart.setOption()将option对象应用于图表。
以下一个创建饼图的示例代码：
var chart = echarts.init(document.getElementById('chart'));
var 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)'
}
}
}
]
};
chart.setOption(option);
上面的代码创建了一个饼图，用于显示访问数据。在option对象中，设置了图表的标题、框、例、数据系列和样式。最后，使用chart.setOption()方法将option对象应用于图表。
总结：
- ECharts3是一个基于JavaScript的开源可视化库，可以用于各种交互式图表和地图。
- 可以从ECharts官网下载ECharts3将echarts.min.js文件复制到项目文件夹中。
- 可以使用HTML文件和JavaScript代码创建图表。在JavaScript代码中，可以使用ECharts3创建各种图表类型，如柱状图、饼图等。
以下是一个完整的示例代码，用于一个包含柱状图和饼图的页面：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ECharts3 Demo</title>
<script src="echarts.min.js"></script>
</head>
<body>
<div id="chart1" style="width: 600px;height:400px;"></div>
<div id="chart2" style="width: 600px;height:400px;"></div>
<script>
var chart1 = echarts.init(document.getElementById('chart1'));
var option1 = {
title: {
text: '柱状图示例'
},
tooltip: {},
legend: {
data:['销量']
},
xAxis: {
data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
},
yAxis: {},
series: [{
name: '销量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}]
};
chart1.setOption(option1);
var chart2 = echarts.init(document.getElementById('chart2'));
var option2 = {
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)'
}
}
}
]
};
chart2.setOption(option2);
</script>
</body>
</html>
上面的代码创建了一个包含柱状图和饼图的页面。在JavaScript代码中，分别创建了两个图表对象chart1和chart2，并分别设置了柱状图和饼图的option对象。最后，使用chart1.setOption()和chart2.setOption()方法将option对象应用于图表。
本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：echarts3 - Python技术站
微信扫一扫 
支付宝扫一扫 