echarts 柱状图的提示怎么弄
2个回答
展开全部
<script type="text/javascript"> //引入echarts包
data=[{name:"南京",hjmj:"26",kq:"30",td:"35" },
{name:"徐州",hjmj:"21",kq:"12",td:"30"},
{name:"苏州",hjmj:"4",kq:"",td:"3" }]
//data后台返回的数据。
var NAME = [];
var HJMJ = [];
var KQ = [];
var TD = [];
for (var i = 0; i < data.length; i++) {//将json格式转换为Echarts的数组格式
NAME.push(data[i].name || ",");
HJMJ.push(data[i].hjmj || ",");
KQ.push(data[i].kq || ",");
TD.push(data[i].td || ",");
}
var chart = document.getElementById('column');//div的id；
var echart = echarts.init(chart);
var option = {
title: {
padding:50,
text: '江苏省登记统计数'
},
grid: {
x: 100,
y: 100,
borderWidth: 1
},
tooltip: {
trigger: 'axis'
},
legend: {
padding: 50,
data: ['在建矿山','生产矿山','废弃矿山'],
orient: 'horizontal'
},
calculable: false,
xAxis: [
{
type: 'category',
data: NAME
}
],
yAxis: [
{
type: 'value'
}
],
series: [
{
name: '在建矿山',
type: 'bar',
data: HJMJ
},
{
name: '生产矿山',
type:'bar',
data: KQ
},
{
name: '废弃矿山',
type:'bar',
data: TD
},
]
};
echart.setOption(option);
function eConsole(param) {
console.log(param);
}
echart.on("click", eConsole);
});
</script>
<body >
<div id="column" style="width: 1000px; height: 550px;display:none ;"></div> //高度，宽度自己定义
</body>
data=[{name:"南京",hjmj:"26",kq:"30",td:"35" },
{name:"徐州",hjmj:"21",kq:"12",td:"30"},
{name:"苏州",hjmj:"4",kq:"",td:"3" }]
//data后台返回的数据。
var NAME = [];
var HJMJ = [];
var KQ = [];
var TD = [];
for (var i = 0; i < data.length; i++) {//将json格式转换为Echarts的数组格式
NAME.push(data[i].name || ",");
HJMJ.push(data[i].hjmj || ",");
KQ.push(data[i].kq || ",");
TD.push(data[i].td || ",");
}
var chart = document.getElementById('column');//div的id；
var echart = echarts.init(chart);
var option = {
title: {
padding:50,
text: '江苏省登记统计数'
},
grid: {
x: 100,
y: 100,
borderWidth: 1
},
tooltip: {
trigger: 'axis'
},
legend: {
padding: 50,
data: ['在建矿山','生产矿山','废弃矿山'],
orient: 'horizontal'
},
calculable: false,
xAxis: [
{
type: 'category',
data: NAME
}
],
yAxis: [
{
type: 'value'
}
],
series: [
{
name: '在建矿山',
type: 'bar',
data: HJMJ
},
{
name: '生产矿山',
type:'bar',
data: KQ
},
{
name: '废弃矿山',
type:'bar',
data: TD
},
]
};
echart.setOption(option);
function eConsole(param) {
console.log(param);
}
echart.on("click", eConsole);
});
</script>
<body >
<div id="column" style="width: 1000px; height: 550px;display:none ;"></div> //高度，宽度自己定义
</body>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
ZESTRON
2024-09-04 广告
在Dr. O.K. Wack Chemie GmbH，我们高度重视ZESTRON的表界面分析技术。该技术通过深入研究材料表面与界面的性质，为提升产品质量与可靠性提供了有力支持。ZESTRON的表界面分析不仅涵盖了相变化、化学反应、吸附与解吸...
点击进入详情页
本回答由ZESTRON提供
展开全部
官方实例里应该有吧
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
