<!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>
js图表制作
2024-08-23
19
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《
阿里云开发者社区用户服务协议》和
《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写
侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介：
js图表制作
目录
相关文章
|
6月前
|
开发框架
数据可视化
.NET
|
数据可视化
|
3月前
|
JavaScript
Apache
|
3月前
|
数据可视化
JavaScript
前端开发
惊世奇迹！D3.js 铸就数据可视化辉煌，探索交互式图表与效果的奇幻之旅！
【8月更文挑战第12天】在数据驱动的时代，D3.js 作为领先的 JavaScript 库，以其强大的功能和灵活性在数据可视化领域脱颖而出。开发者可通过 D3.js 构建精美的交互式图表，如简单的柱状图或具备缩放拖拽功能的折线图，甚至将数据以地图、树形结构等独特形式展现。尽管学习曲线陡峭，但它在数据分析、商业智能等领域的广泛应用使其成为专业人士传达数据故事、辅助决策制定的强大工具。
90
1
1
|
5月前
|
JavaScript
|
5月前
|
JavaScript
容器
|
6月前
|
存储
JavaScript
前端开发
|
6月前
|
数据可视化
前端开发
JavaScript
探秘D3.js：数据可视化交互式图表与效果
数据可视化已经成为如今大数据时代的重要工具之一。它不仅可以更直观地呈现数据，还可以帮助人们更好地理解数据背后的含义。而D3.js则作为目前最流行的数据可视化库之一，其强大的功能和灵活性广受开发者青睐。本文将介绍如何使用D3.js创建交互式图表和可视化效果，以及如何利用其强大的API来进行个性化定制。
444
0
0
|
6月前
|
移动开发
JavaScript
|
6月前
|
数据可视化
JavaScript
前端开发
D3.js的交互式图表和可视化效果
在当今数据爆炸的时代，有一个强大的工具可以帮助我们更好地理解和使用数据：D3.js。D3.js是一个流行的JavaScript库，用于创建交互式图表和可视化效果。本文将介绍D3.js的基本特性以及如何使用它来创建高质量的数据可视化。
120
0
0