使用echarts绘制条形图和扇形图
Posted chengxuxiaoyuan
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了使用echarts绘制条形图和扇形图相关的知识，希望对你有一定的参考价值。
使用echarts绘制条形图和扇形图
简单举例说明下echarts如何绘制条形图和扇形图
代码示例
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>echarts绘制条形图和扇形图</title>
<script src="echarts.js"></script>
</head>
<body>
<div id="chart1" style="width: 500px;height:500px;float: left;"></div>
<div id="chart2" style="width: 500px;height:500px;float: right;"></div>
<script>
var mychart1=echarts.init(document.getElementById('chart1'),'light');
// 指定图表的配置项和数据
var option = {
title: {
text: 'ECharts 入门示例'
},
tooltip: {},
legend: {
data:['销量']
},
xAxis: {
data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
},
yAxis: {},
series: [{
name: '销量',
type: 'bar',
data: [40, 20, 36, 10, 10, 20]
}]
};
// 使用指定的配置项和数据显示条形图表1。
mychart1.setOption(option);
//显示扇形图表2
var mychart2=echarts.init(document.getElementById('chart2'),'light');
var option2 = {
title: {
text: 'ECharts 扇形图示例'
},
tooltip: {},
series: [{
type: 'pie',
data: [
{value:1, name:'视频广告'},
{value:2, name:'联盟广告'}
]
}]
};
// 使用刚指定的配置项和数据显示图表。
mychart2.setOption(option2);
</script>
</body>
</html>展示的效果如下图
注意
扇形图的数据中,value值和图形百分比的关系是，单个value/所有value的综合*100%
以上是关于使用echarts绘制条形图和扇形图的主要内容，如果未能解决你的问题，请参考以下文章