Echarts2 柱状图

最新推荐文章于 2023-10-21 16:31:05 发布

o米汤o

最新推荐文章于 2023-10-21 16:31:05 发布

阅读量320

点赞数 1

分类专栏：编程文章标签： echart

本文链接：https://blog.csdn.net/qq_30568049/article/details/78484210

版权

编程专栏收录该内容

3 篇文章 0 订阅

订阅专栏

1.编写html文件:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="echarts-all.js"></script>
<script src="analyze.js"></script>
<title>Insert title here</title>
</head>
<body>
<div id="test1" style="width: 300px;height: 200px;">//必须设置div的宽高,否则无图
</div>
</body>
<script type="text/javascript">
var domId = "test1";
var titleName = "表";
var legendDescr = ["2011","2012"];
var yAxisData = ['巴西','印尼','美国','印度','中国'];
var seriesData = [[10, 20, 30, 15, 20, 11],[0, 5, 18, 22, 12, 9]];
getBar(domId,titleName,legendDescr,yAxisData,seriesData);
</script>
</html>

2.封装柱状图生成函数getBar():

/**
* 定义双柱状图生成函数
* params:domId,标题名,柱形描述,Y轴数组,变量数组
*/
function getBar(domId,titleName,legendDescr,yAxisData,seriesData){
//初始化Dom
var myChart = echarts.init(document.getElementById(domId));
/*//加载时显示语句
myChart.showLoading({
text: '分析数据中...', //loading话术
});*/

//设置图表信息
option = {
title : {
text: titleName,//String
},
legend: {
data:legendDescr//Array
},
toolbox: {
show : false,
feature : {
mark : {show: true},
dataView : {show: true, readOnly: false},
magicType: {show: true, type: ['line', 'bar']},
restore : {show: true},
saveAsImage : {show: true}
}
},
calculable : false,
xAxis : [
{
type : 'value',
boundaryGap : [0, 0.01]
}
],
yAxis : [
{
type : 'category',
data : yAxisData//Array
}
],
series : [
{
name:legendDescr[0],
type:'bar',
data:seriesData[0],//Array
color:'#4DB38A',