echarts之柱状图(bar)、饼状图(pie)
程序员文章站
2022-05-26 21:40:20
...
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>echartsLineTest</title>
<script src="../../libs/jquery/jquery.js"></script>
<script src="../../widgets/dnQuery/lib/echarts/dist/echarts-all.js"></script>
</head>
<body>
<div id="staChart" style="width:550px;height:320px;"></div>
<script>
var chart;
$(function() {
setChart()
})
function setChart() {
chart = echarts.init(document.getElementById("staChart"));
chart.setOption(getChartOption("bar"));
}
function getChartOption(type) {
var yField = "地块面积/公顷";//y坐标字段名称
var xField = "地块名称";//y坐标字段名称
var title = "2016年土地利用现状统计";//标题
var subTitle = "地块面积统计";//副标题
//自定义切换按钮
var myToolTitle = "";
var myToolImage = "";
if (type === 'bar') {
myToolTitle = "饼图切换";
myToolImage = 'image://../images/iconPie.png';
} else if (type === 'pie') {
myToolTitle = "直方图切换";
myToolImage = 'image://../images/iconBar.png';
}
//option
var option = {};
if (type == 'bar') {
var dataZoomEndPercent = 1200/3;
var xdata = ["耕地","林地"];
var staSeries = {
name: "地块面积",
type: 'bar', //line
itemStyle: { normal: { label: { show: true, position: 'top' } } },
data: [100,200],
barWidth: 25
};
option = {
color: ['#3398DB'],
title: {
x: 'center',
text: title,
subtext: subTitle
},
tooltip: {
trigger: 'axis',
axisPointer: { // 坐标轴指示器，坐标轴触发有效
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
}
},
toolbox: {
show: true,
feature: {
//mark: { show: true },
//dataView: { show: true, readOnly: false },
magicType: { show: true, type: ['bar'] },
// magicType: { show: true, type: ['line', 'bar'] },
//restore: { show: true },
myTool: {
show: true,
title: myToolTitle,
icon: myToolImage,
onclick: function (option1) {
chart = echarts.init(document.getElementById("staChart"));
chart.setOption(getChartOption('pie'));
}
},
saveAsImage: { show: true }
}
},
calculate: true,
grid: {
left: '0px',
right: '0px',
bottom: '10px',
containLabel: true
},
xAxis: [
{
type: 'category',
boundaryGap: true,
name:xField,
data: xdata,
axisLabel: {
interval: 0,
rotate: 20
}
//axisTick: {
// alignWithLabel: true
//}
}
],
yAxis: [
{
type: 'value',
name: yField,
axisLabel: {
formatter: '{value}'
}
}
],
dataZoom : {
show : false,
realtime : true,
start : 0,
end : dataZoomEndPercent,
zoomLock: true
},
series: [
staSeries
]
};
} else if (type == "pie") {
option = {
title: {
text: title,
subtext: subTitle,
x: 'center'
},
tooltip: {
trigger: 'item',
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
legend: {
show: true,
orient: 'vertical',
selectedMode:false,//取消图例上的点击事件
x: '10px',
data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎']
},
series: [
{
name: yField,
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)'
}
}
}
],
toolbox: {
show: true,
feature: {
myTool: {
show: true,
title: myToolTitle,
icon: myToolImage,
onclick: function (option1) {
chart = echarts.init(document.getElementById("staChart"));
chart.setOption(getChartOption('bar'));
}
},
saveAsImage: { show: true }
}
}
};
}
return option;
}
</script>
</body>
</html>echsrts引用的相关js文件：链接：https://pan.baidu.com/s/1GP34oLNd-EEjqWXHZ9sYeA 密码：se9t