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

共3个文件

js：2个

html：1个

版权申诉

echarts

统计分析

数据可视化

大屏可视化

6 浏览量 2024-12-14 07:58:22 上传评论收藏 864KB RAR 举报

资源推荐

资源详情

资源评论

收起资源包目录

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

图表

lib

5.5.0

echarts.js 3.21MB

echarts.min.js 1005KB

svg

geo

index.html 10KB

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')); //图表配置。 var testData = [100, 60, 130, 170, 140, 100]; var path = 'path://M214,1079l8-6h16l8,6-8,6H222Z'; var colorList = [ new echarts.graphic.LinearGradient(1, 0, 0, 0, [{ offset: 0, color: '#fe3636', }, { offset: .3, color: '#fe3636' }, { offset: .3, color: '#ff4546' }, { offset: .5, color: '#ff4546' }, { offset: .7, color: '#ff4546' }, { offset: .7, color: '#ff8584' }, { offset: 1, color: '#ff8584' } ]), new echarts.graphic.LinearGradient(1, 0, 0, 0, [{ offset: 0, color: '#ffb200', }, { offset: .3, color: '#ffb200' }, { offset: .3, color: '#fec200' }, { offset: .5, color: '#fec200' }, { offset: .7, color: '#fec200' }, { offset: .7, color: '#ffdb17' }, { offset: 1, color: '#ffdb17' } ]), new echarts.graphic.LinearGradient(1, 0, 0, 0, [{ offset: 0, color: '#df7100', }, { offset: .3, color: '#df7100' }, { offset: .3, color: '#fd8c00' }, { offset: .5, color: '#fd8c00' }, { offset: .7, color: '#fd8c00' }, { offset: .7, color: '#ff9a00' }, { offset: 1, color: '#ff9a00' } ]), new echarts.graphic.LinearGradient(1, 0, 0, 0, [{ offset: 0, color: '#b0b513', }, { offset: .3, color: '#b0b513' }, { offset: .3, color: '#bec81a' }, { offset: .5, color: '#bec81a' }, { offset: .7, color: '#bec81a' }, { offset: .7, color: '#dcdc3c' }, { offset: 1, color: '#dcdc3c' } ]), new echarts.graphic.LinearGradient(1, 0, 0, 0, [{ offset: 0, color: '#0078e6', }, { offset: .3, color: '#0078e6' }, { offset: .3, color: '#1593f7' }, { offset: .5, color: '#1593f7' }, { offset: .7, color: '#1593f7' }, { offset: .7, color: '#4daeff' }, { offset: 1, color: '#4daeff' } ]), new echarts.graphic.LinearGradient(1, 0, 0, 0, [{ offset: 0, color: '#8906aa', }, { offset: .3, color: '#8906aa' }, { offset: .3, color: '#a11cb6' }, { offset: .5, color: '#a11cb6' }, { offset: .7, color: '#a11cb6' }, { offset: .7, color: '#b030cb' }, { offset: 1, color: '#b030cb' } ]), ]; let option = { toolbox: { show: true, feature: { saveAsImage: {}, }, }, backgroundColor: '#dedede', title: { text: 'BUSINESS TEMPLATE', textStyle: { fontSize: '20', fontFamily: 'FZYaoti', fontWeight: '600', color: '#f84e4f', }, }, tooltip: { trigger: 'item', }, grid: { left: 100, bottom: 100 }, xAxis: { axisLabel: { textStyle: { color: 'rgba(65, 49,28, .9)', fontSize: 30, fontFamily: 'FZYaoti', fontWeight: 100, }, margin: 20, }, splitLine: { show: false }, axisLine: { lineStyle: { color: 'rgba(255, 255,255, .8)', width: 4, } }, axisTick: { show: false }, data: ['A', 'B', 'C', 'D', 'E', 'F',] }, yAxis: { axisLine: { show: false }, axisLabel: { textStyle: { color: '#42321c', fontSize: 20, fontFamily: 'FZYaoti', }, margin: 20, }, splitLine: { show: true, lineStyle: { color: 'rgba(255, 255,255, .8)', width: 2, } }, axisTick: { show: false }, }, series: [ { type: "pictorialBar", symbol: path, symbolSize: [45.5, 25], symbolOffset: [0, 12], z: 1, itemStyle: { opacity: 1, color: function (params) { return colorList[params.dataIndex] }, shadowColor: 'rgba(115, 106, 28, .7)', shadowBlur: 3,

评论收藏

内容反馈

版权申诉