<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>ECharts</title>
<script src="./echarts.min.js"></script>
<script src=""></script>
</head>
<body style="background-color: #F1F1F1;">
<style>
.big {
display: flex;
justify-content: space-around;
width: 94%;
margin-left: 3%;
}
#main {
background-color: white;
width: 25%;
height: 180px;
}
#mainTwo {
background-color: white;
width: 25%;
height: 180px;
}
#mainThree {
background-color: white;
width: 25%;
height: 180px;
}
#mainFour {
background-color: white;
width: 25%;
height: 180px;
}
#mainFive {
background-color: white;
width: 92%;
margin-left: 4%;
height: 360px;
margin-top: 1%;
}
</style>
<div class="big">
<div id="main" style="width: 23%;height:220px;"></div>
<div id="mainTwo" style="width: 23%;height:220px;"></div>
<div id="mainThree" style="width: 23%;height:220px;"></div>
<div id="mainFour" style="width: 23%;height:220px;"></div>
</div>
<div id="mainFive"></div>
<script type="text/javascript">
let data = {
"code": 1,
"msg": "请求成功",
"user_up": 262,
"user_down": 4,
"goods_up": 5,
"goods_down": 4,
"supply_up": 3,
"supply_down": 0,
"need_up": 5,
"need_down": 0,
"accounting": 2,
"lawyer": 2,
"bond": 2,
"bar": [{
"id": 1,
"name": "农业",
"goods": 0,
"supply": 0,
"need": 1
},
{
"id": 2,
"name": "林业",
"goods": 0,
"supply": 0,
"need": 0
},
{
"id": 3,
"name": "畜牧业",
"goods": 0,
"supply": 0,
"need": 0
},
{
"id": 4,
"name": "渔业",
"goods": 0,
"supply": 0,
"need": 0
},
{
"id": 6,
"name": "农、林、牧、渔专业及辅助性活动",
"goods": 0,
"supply": 0,
"need": 0
},
{
"id": 7,
"name": "煤炭开采和洗选业",
"goods": 0,
"supply": 0,
"need": 0
},
{
"id": 8,
"name": "石油和天然气开采业",
"goods": 0,
"supply": 0,
"need": 0
},
{
"id": 9,
"name": "黑色金属矿采选业",
"goods": 0,
"supply": 0,
"need": 0
},
{
"id": 10,
"name": "有色金属矿采选业",
"goods": 0,
"supply": 0,
"need": 0
},
{
"id": 11,
"name": "非金属矿采选业",
"goods": 0,
"supply": 0,
"need": 0
},
{
"id": 12,
"name": "开采专业及辅助性活动",
"goods": 0,
"supply": 0,
"need": 0
},
{
"id": 13,
"name": "其他采矿业",
"goods": 0,
"supply": 0,
"need": 0
},
{
"id": 14,
"name": "农副食品加工业",
"goods": 0,
"supply": 0,
"need": 0
},
{
"id": 15,
"name": "食品制造业",
"goods": 0,
"supply": 0,
"need": 0
},
{
"id": 16,
"name": "酒、饮料和精制茶制造业",
"goods": 0,
"supply": 0,
"need": 0
},
{
"id": 17,
"name": "烟草制品业",
"goods": 0,
"supply": 0,
"need": 0
},
{
"id": 18,
"name": "纺织业",
"goods": 1,
"supply": 0,
"need": 0
},
{
"id": 19,
"name": "纺织服装、服饰业",
"goods": 0,
"supply": 0,
"need": 0
},
{
"id": 20,
"name": "皮革、毛皮、羽毛及其制品和制鞋业",
"goods": 0,
"supply": 0,
"need": 0
},
{
"id": 21,
"name": "木材加工和木、竹、藤、棕、草制品业",
"goods": 0,
"supply": 0,
"need": 0
},
{
"id": 22,
"name": "家具制造业",
"goods": 0,
"supply": 0,
"need": 0
},
{
"id": 23,
"name": "造纸和纸制品业",
"goods": 0,
"supply": 0,
"need": 0
},
{
"id": 24,
"name": "印刷和记录媒介复制业",
"goods": 0,
"supply": 0,
"need": 1
},
{
"id": 25,
"name": "文教、工美、体育和娱乐用品制造业",
"goods": 0,
"supply": 0,
"need": 0
},
{
"id": 26,
"name": "石油、煤炭及其他燃料加工业",
"goods": 0,
"supply": 0,
"need": 0
},
{
"id": 27,
"name": "化学原料和化学制品制造业",
"goods": 0,
"supply": 0,
"need": 0
},
{
"id": 28,
"name": "医药制造业",
"goods": 0,
"supply": 0,
"need": 0
},
{
"id": 29,
"name": "化学纤维制造业",
"goods": 0,
"supply": 0,
"need": 0
},
{
"id": 30,
"name": "橡胶和塑料制品业",
"goods": 0,
"supply": 0,
"need": 0
},
{
"id": 31,
"name": "非金属矿物制品业",
"goods": 0,
"supply": 0,
"need": 0
},
{
"id": 32,
"name": "黑色金属冶炼和压延加工业",
"goods": 0,
"supply": 0,
"need": 0
},
{
"id": 33,
"name": "有色金属冶炼和压延加工业",
"goods": 0,
"supply": 0,
"need": 0
},
{
"id": 34,
"name": "金属制品业",
"goods": 0,
"supply": 0,
"need": 0
},
{
"id": 35,
"name": "通用设备制造业",
"goods": 0,
"supply": 0,
"need": 3
},
{
"id": 36,
"name": "专用设备制造业",
"goods": 0,
"supply": 0,
"need": 0
},
{
"id": 37,
"name": "汽车制造业",
"goods": 0,
"supply": 0,
"need": 0
},
{
"id": 38,
"name": "铁路、船舶、航空航天和其他运输设备制造业",
"goods": 0,
"supply": 0,
"need": 0
},
{
"id": 39,
"name": "电气机械和器材制造业",
"goods": 0,
"supply": 0,
"need": 0
},
{
"id": 40,
"name": "计算机、通信和其他电子设备制造业",
"goods": 0,
"supply": 0,
"need": 0
},
{
"id": 41,
"name": "仪器仪表制造业",
"goods": 0,
"supply": 0,
"need": 0
},
{
"id": 42,
"name": "其他制造业",
"goods": 0,
"supply": 0,
"need": 0
},
{
"id": 43,
"name": "废弃资源综合利用业",
"goods": 0,
"supply": 0,
"need": 0
},
{
"id": 44,
"name": "金属制品、机械和设备修理业",
"goods": 0,
"supply": 0,
"need": 0
},
{
"id": 45,
"name": "电力、热力生产和供应业",
"goods": 0,
"supply": 0,
"need": 0
},
{
"id": 46,
"name": "燃气生产和供应业",
"goods": 0,
"supply": 0,
"need": 0
},
{
"id": 47,
"name": "水的生产和供应业",
"goods": 0,
"supply": 0,
"need": 0
},
{
"id": 48,
"name": "房屋建筑业",
"goods": 0,
"supply": 0,
"need": 0
},
{
"id": 49,
"name": "土木工程建筑业",
"goods": 0,
"supply": 0,
"need": 0
},
{
"id": 50,
"name": "建筑安装业",
"goods": 0,
"supply": 0,
"need": 0
},
{
"id": 51,
"name": "建筑装饰、装修和其他建筑业",
"goods": 2,
"supply": 0,
"need": 0
},
{
"id": 52,
"name": "批发业",
"goods": 0,
"supply": 0,
"need": 0
},
{
"id": 53,
"name": "零售业",
"goods": 0,
"supply": 0,
"need": 0
},
{
"id": 54,
"name": "铁路运输业",
"goods": 0,
"supply": 0,
"need": 0
},
{
"id": 55,
"name": "道路运输业",
"goods": 0,
"supply": 0,
"need": 0
},
{
"id": 56,
"name": "水上运输业",
"goods": 0,
"supply": 0,
"need": 0
},
{
"id": 57,
"name": "航空运输业",
"goods": 0,
"supply": 0,
"need": 0
},
{
"id": 58,
"name": "管道运输业",
"goods": 0,
"supply": 0,
"need": 0
},
{
"id": 59,
"name": "多式联运和运输代理业",
"goods": 0,
"supply": 0,
"need": 0
},
{
"id": 60,
"name": "装卸搬运和仓储业",
"goods": 0,
"supply": 0,
"need": 0
},
{
"id": 61,
"name": "邮政业",
"goods": 0,
"supply": 0,
"need": 0
},
{
"id": 62,
"name": "住宿业",
"goods": 0,
"supply": 0,
"need": 0
},
{
"id": 63,
"name": "餐饮业",
"goods": 0,
"supply": 0,
"need": 0
},
{
"id": 64,
"name": "电信、广播电视和卫星传输服务",
"goods": 0,
"supply": 0,
"need": 0
},
{
"id": 65,
"name": "互联网和相关服务",
"goods": 0,
"supply": 0,
"need": 0
},
{
"id": 66,
"name": "软件和信息技术服务业",
"goods": 0,
"supply": 0,
"need": 0
},
{
"id": 67,
"name": "货币金融服务",
"goods": 0,
"supply": 0,
"need": 0
},
{
"id": 68,
"name": "资本市场服务",
"goods": 0,
"supply": 0,
"need": 0
},
{
"id": 69,
"name": "保险业",
"goods": 0,
"supply": 0,
"need": 0
},
{
"id": 70,
"name": "其他金融业",
"goods": 1,
"supply": 0,
"need": 0
},
{
"id": 71,
"name": "房地产业",
"goods": 1,
"supply": 0,
"need": 0
},
{
"id": 72,
"name": "租赁业",
"goods": 0,
"supply": 0,
"need": 0
},
{
"id": 73,
"name": "商务服务业",
"goods": 2,
"supply": 0,
"need": 0
},
{
"id": 74,
"name": "研究和试验发展",
"goods": 0,
"supply": 0,
"need": 0
},
{
"id": 75,
"name": "专业技术服务业",
"goods": 0,
"supply": 0,
"need": 0
},
{
"id": 76,
"name": "科技推广和应用服务业",
"goods": 0,
"supply": 0,
"need": 0
},
{
"id": 77,
"name": "水利管理业",
"goods": 0,
"supply": 0,
"need": 0
},
{
"id": 78,
"name": "生态保护和环境治理业",
"goods": 0,
"supply": 0,
"need": 0
},
{
"id": 79,
"name": "公共设施管理业",
"goods": 0,
"supply": 0,
"need": 0
},
{
"id": 80,
"name": "土地管理业",
"goods": 0,
"supply": 0,
"need": 0
},
{
"id": 81,
"name": "居民服务业",
"goods": 0,
"supply": 0,
"need": 0
},
{
"id": 82,
"name": "机动车、电子产品和日用产品修理业",
"goods": 0,
"supply": 0,
"need": 0
},
{
"id": 83,
"name": "其他服务业",
"goods": 0,
"supply": 1,
"need": 0
},
{
"id": 84,
"name": "教育",
"goods": 0,
"supply": 0,
"need": 0
},
{
"id": 85,
"name": "卫生",
"goods": 1,
"supply": 1,
"need": 0
},
{
"id": 86,
"name": "社会工作",
"goods": 0,
"supply": 0,
"need": 0
},
{
"id": 87,
"name": "新闻和出版业",
"goods": 0,
"supply": 0,
"need": 0
},
{
"id": 88,
"name": "广播、电视、电影和录音制作业",
"goods": 0,
"supply": 0,
"need": 0
},
{
"id": 89,
"name": "文化艺术业",
"goods": 0,
"supply": 0,
"need": 0
},
{
"id": 90,
"name": "体育",
"goods": 0,
"supply": 0,
"need": 0
},
{
"id": 91,
"name": "娱乐业",
"goods": 0,
"supply": 0,
"need": 0
},
{
"id": 92,
"name": "中国共产党机关",
"goods": 0,
"supply": 0,
"need": 0
},
{
"id": 93,
"name": "国家机构",
"goods": 0,
"supply": 1,
"need": 0
},
{
"id": 94,
"name": "人民政协、民主党派",
"goods": 0,
"supply": 0,
"need": 0
},
{
"id": 95,
"name": "社会保障",
"goods": 0,
"supply": 0,
"need": 0
},
{
"id": 96,
"name": "群众团体、社会团体和其他成员组织",
"goods": 0,
"supply": 0,
"need": 0
},
{
"id": 97,
"name": "基层群众自治组织及其他组织",
"goods": 0,
"supply": 0,
"need": 0
},
{
"id": 98,
"name": "国际组织",
"goods": 0,
"supply": 0,
"need": 0
},
{
"id": 100,
"name": "农、林、牧、渔业",
"goods": 0,
"supply": 0,
"need": 0
},
{
"id": 101,
"name": "采矿业",
"goods": 0,
"supply": 0,
"need": 0
},
{
"id": 102,
"name": "制造业",
"goods": 0,
"supply": 0,
"need": 0
},
{
"id": 104,
"name": "电力、热力、燃气及水生产和供应业",
"goods": 0,
"supply": 0,
"need": 0
},
{
"id": 105,
"name": "建筑业",
"goods": 0,
"supply": 0,
"need": 0
},
{
"id": 106,
"name": "批发和零售业",
"goods": 0,
"supply": 0,
"need": 0
},
{
"id": 107,
"name": "交通运输、仓储和邮政业",
"goods": 0,
"supply": 0,
"need": 0
},
{
"id": 108,
"name": "住宿和餐饮业",
"goods": 0,
"supply": 0,
"need": 0
},
{
"id": 109,
"name": "信息传输、软件和信息技术服务业",
"goods": 0,
"supply": 0,
"need": 0
},
{
"id": 110,
"name": "金融业",
"goods": 0,
"supply": 0,
"need": 0
},
{
"id": 111,
"name": "房地产",
"goods": 0,
"supply": 0,
"need": 0
},
{
"id": 112,
"name": "租赁和商务服务业",
"goods": 0,
"supply": 0,
"need": 0
},
{
"id": 113,
"name": "科学研究和技术服务业",
"goods": 0,
"supply": 0,
"need": 0
},
{
"id": 114,
"name": "水利、环境和公共设施管理业",
"goods": 0,
"supply": 0,
"need": 0
},
{
"id": 115,
"name": "居民服务、修理和其他服务业",
"goods": 0,
"supply": 0,
"need": 0
},
{
"id": 116,
"name": "教育",
"goods": 0,
"supply": 0,
"need": 0
},
{
"id": 117,
"name": "卫生和社会工作",
"goods": 0,
"supply": 0,
"need": 0
},
{
"id": 118,
"name": "文化、体育和娱乐业",
"goods": 0,
"supply": 0,
"need": 0
},
{
"id": 119,
"name": "公共管理、社会保障和社会组织",
"goods": 0,
"supply": 0,
"need": 0
},
{
"id": 120,
"name": "国际组织",
"goods": 0,
"supply": 0,
"need": 0
},
{
"id": 124,
"name": "你好",
"goods": 0,
"supply": 0,
"need": 0
}
]
};
// 第一个
// 初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
// 指定图表的配置项和数据
var option = {
title: {
text: '商品数量',
left: 'center'
},
tooltip: {
trigger: 'item'
},
legend: {
orient: 'vertical',
left: 'left'
},
series: [{
name: 'Access From',
type: 'pie',
radius: ['40%', '70%'],
data: [{
value: data.goods_up,
name: '已审核',
itemStyle: {
color: '#91CC75' // 自定义颜色1
}
},
{
value: data.goods_down,
name: '未审核'
}
]
}]
};
// 使用配置项显示图表
myChart.setOption(option);
// 第二个
var myChartTwo = echarts.init(document.getElementById('mainTwo'));
var optionTwo = {
title: {
text: '事务所数量',
left: 'center'
},
tooltip: {
trigger: 'item'
},
legend: {
orient: 'vertical',
left: 'left'
},
series: [{
name: 'Access From',
type: 'pie',
radius: ['40%', '70%'],
data: [{
value: data.lawyer,
name: '律师'
},
{
value: data.accounting,
name: '会计'
},
{
value: data.bond,
name: '证券'
}
]
}]
};
myChartTwo.setOption(optionTwo);
// 第三个
var myChartThree = echarts.init(document.getElementById('mainThree'));
var optionThree = {
title: {
text: '客户数量',
left: 'center'
},
tooltip: {
trigger: 'item'
},
legend: {
orient: 'vertical',
left: 'left'
},
series: [{
name: 'Access From',
type: 'pie',
radius: ['40%', '70%'],
data: [{
value: data.user_up,
name: '已审核'
},
{
value: data.user_down,
name: '待审核'
}
]
}]
};
myChartThree.setOption(optionThree);
// 第四个
var myChartFour = echarts.init(document.getElementById('mainFour'));
var optionFour = {
title: {
text: '需求数量',
left: 'center'
},
tooltip: {
trigger: 'item'
},
legend: {
orient: 'vertical',
left: 'left'
},
series: [{
name: 'Access From',
type: 'pie',
radius: ['40%', '70%'],
data: [{
value: data.need_up,
name: '已审核'
},
{
value: data.need_down,
name: '待审核'
}
]
}]
};
myChartFour.setOption(optionFour);
// 第五个
var myChartFive = echarts.init(document.getElementById('mainFive'));
var seriesData = [];
for (var i = 0; i < data.bar.length; i++) {
var item = data.bar[i];
var seriesItem = {
name: item.name,
type: 'bar',
data: [item.goods, item.supply, item.need]
};
seriesData.push(seriesItem);
}
var xAxisData = [];
for (var i = 0; i < data.bar.length; i++) {
xAxisData.push(data.bar[i].name);
}
var optionFive = {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
toolbox: {
show: true,
feature: {
mark: {
show: true
},
dataView: {
show: true,
readOnly: false
},
magicType: {
show: true,
type: ['line', 'bar']
},
restore: {
show: true
},
saveAsImage: {
show: true
}
}
},
calculable: true,
legend: {
data: ['Goods', 'Supply', 'Need'],
itemGap: 5
},
grid: {
top: '12%',
left: '1%',
right: '10%',
containLabel: true
},
xAxis: [{
type: 'category',
data: xAxisData
}],
yAxis: [{
type: 'value',
name: 'Amount'
}],
dataZoom: [{
show: true,
start: 94,
end: 100
},
{
type: 'inside',
start: 94,
end: 100
},
{
show: true,
yAxisIndex: 0,
filterMode: 'empty',
width: 30,
height: '80%',
showDataShadow: false,
left: '93%'
}
],
series: seriesData
};
myChartFive.setOption(optionFive);
</script>
</body>
</html>
扫一扫
07-08
1062
1062
05-22
845
845
11-23
786
786
10-02
488
488
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
