ECharts柱状图-柱图42.rar资源-CSDN文库

共3个文件

js：2个

html：1个

版权申诉

echarts

统计分析

数据可视化

大屏可视化

26 浏览量 2024-12-18 10:45:06 上传评论收藏 864KB RAR 举报

资源推荐

资源详情

资源评论

收起资源包目录

ECharts柱状图-柱图42.rar （3个子文件）

图表

lib

5.5.0

echarts.js 3.21MB

echarts.min.js 1005KB

svg

geo

index.html 8KB

images

json

<!doctype html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width,initial-scale=1"> <style> #chart-panel { position: absolute; left: 0; right: 0; top: 0; bottom: 0; width: 1000px; height: 750px; } </style> <script src="./lib/5.5.0/echarts.min.js"></script> </head> <body> <div id="chart-panel"></div>  <script type="text/javascript"> //初始化图表对象。 var myChart = echarts.init(document.getElementById('chart-panel'), 'dark'); //图表配置。 let option = { toolbox: { show: true, feature: { saveAsImage: {}, }, }, grid: { left: "2%", top: "10%", right: "2%", bottom: "5%", containLabel: true, }, xAxis: [ { type: "category", data: [ "集装箱", "起重机", "龙门起重机", "吊运起重机", "卸船机", "取料机", "装船机", "门坐起重机", "堆离机", ], axisLine: { show: true, }, axisTick: { show: true, alignWithLabel: true, }, splitLine: { show: false, }, axisLabel: { fontSize: 14, color: "#FFFFFF", }, }, ], yAxis: [ { type: "value", name: "设备数量(套)", nameGap: 20, interval: 20, axisLabel: { color: "#F1F1F1", show: true, fontSize: 14, }, splitLine: { lineStyle: { opacity: 0.2, type: "dashed", }, show: true, }, axisLine: { show: false, }, axisTick: { show: false, }, }, { type: "value", name: "设备数量(套)", nameGap: 20, interval: 25, axisLabel: { color: "#F1F1F1", show: true, fontSize: 14, }, splitLine: { show: false, }, axisLine: { show: false, }, axisTick: { show: false, }, }, ], series: [ { type: "bar", data: [79, 49, 44, 74, 45, 48, 32, 54, 33], barMaxWidth: 25, itemStyle: { color: "rgba(0, 167, 251, 0.7)", }, showBackground: true, backgroundStyle: { opacity: 0.5, }, }, { type: "line", data: [ 87, 45, 56, 54, 45.7, 53, 29, 89.3, 78.7, ], yAxisIndex: 1, smooth: 0.35, lineStyle: { color: "#fcc03f", }, areaStyle: { color: { type: "linear", x: 0, y: 0, x2: 0, y2: 1, colorStops: [ { offset: 0, color: "rgba(255,120,0,0.5)", }, { offset: 0.7, color: "rgba(255,120,0,0)", }, ], global: false, }, }, symbolSize: 5, symbol: "circle", showSymbol: true, itemStyle: { color: "#FFFFFF", }, }, { type: "line", data: [ 87, 45, 56, 54, 45.7, 53, 29, 89.3, 78.7, ], yAxisIndex: 1, lineStyle: { color: "rgba(252, 192, 63, 0)", }, symbolSize: 12, symbol: "circle", showSymbol: true, itemStyle: { color: "rgba(255, 255, 255, 0)", borderColor: "#fcc03f", borderWidth: 2, }, label: { show: true, position: "right", borderWidth: 1, borderColor: "#fcc03f", color: "#fcc03f", fontSize: 12, backgroundColor: "rgba(0, 0, 0, 0.6)", padding: [2, 10], }, zlevel: 5, }, { type: "line", data: [79, 49, 44, 74, 45, 48, 32, 54, 33], yAxisIndex: 0, lineStyle: { color: "rgba(252, 192, 63, 0)", }, symbolSize: 5, symbol: "circle", showSymbol: true, itemStyle: { color: "#FFFFFF", }, label: { show: true, position: "top", color: "#00a7fb", fontSize: 12, }, zlevel: 5, symbolOffset: [0, -2], }, ], }; //将图表对象和图表配置进行关联。 myChart.setOption(option); </script> </body> </html>

评论收藏

内容反馈

版权申诉