ECharts象形柱图-虚线柱状图效果-3.zip资源-CSDN文库

共5个文件

png：2个

js：2个

html：1个

版权申诉

76 浏览量 2024-12-25 10:33:36 上传评论收藏 2.8MB ZIP 举报

资源推荐

资源详情

资源评论

收起资源包目录

ECharts象形柱图-虚线柱状图效果-3.zip （5个子文件）

图表

lib

5.5.0

echarts.js 3.21MB

echarts.min.js 1005KB

svg

geo

bin

index.html 4KB

images

hill-Kilimanjaro.png 278KB

hill-Qomolangma.png 1.52MB

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> <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> </head> <body> <div id="chart-panel"></div> <script type="text/javascript"> //初始化图表对象。 var myChart = echarts.init(document.getElementById('chart-panel')); //图表配置。 // Generate data let category = []; let dottedBase = +new Date(); let lineData = []; let barData = []; for (let i = 0; i < 20; i++) { let date = new Date((dottedBase += 3600 * 24 * 1000)); category.push( [date.getFullYear(), date.getMonth() + 1, date.getDate()].join('-') ); let b = Math.random() * 200; let d = Math.random() * 200; barData.push(b); lineData.push(d + b); } // option let option = { toolbox: { feature: { saveAsImage: {} } }, backgroundColor: '#0f375f', tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' } }, legend: { data: ['line', 'bar'], textStyle: { color: '#ccc' } }, xAxis: { data: category, axisLine: { lineStyle: { color: '#ccc' } } }, yAxis: { splitLine: { show: false }, axisLine: { lineStyle: { color: '#ccc' } } }, series: [ { name: 'line', type: 'line', smooth: true, showAllSymbol: true, symbol: 'emptyCircle', symbolSize: 15, data: lineData }, { name: 'bar', type: 'bar', barWidth: 10, itemStyle: { borderRadius: 5, color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ { offset: 0, color: '#14c8d4' }, { offset: 1, color: '#43eec6' } ]) }, data: barData }, { name: 'line', type: 'bar', barGap: '-100%', barWidth: 10, itemStyle: { color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ { offset: 0, color: 'rgba(20,200,212,0.5)' }, { offset: 0.2, color: 'rgba(20,200,212,0.2)' }, { offset: 1, color: 'rgba(20,200,212,0)' } ]) }, z: -12, data: lineData }, { name: 'dotted', type: 'pictorialBar', symbol: 'rect', itemStyle: { color: '#0f375f' }, symbolRepeat: true, symbolSize: [12, 4], symbolMargin: 1, z: -10, data: lineData } ] }; //通过图表对象的setOption方法和图表配置进行关联。 myChart.setOption(option); </script> </body> </html>

评论收藏

内容反馈

版权申诉