echarts3D柱状图

最新推荐文章于 2024-06-02 12:02:03 发布

咖啡有点酷

最新推荐文章于 2024-06-02 12:02:03 发布

阅读量1.6k

点赞数

分类专栏： echarts 文章标签： echarts 前端 javascript

本文链接：https://blog.csdn.net/qq_40295815/article/details/127051930

版权

echarts 专栏收录该内容

28 篇文章 5 订阅

订阅专栏

new echarts.graphic.RadialGradient(0.5, 0.4, 0.9, [
{
offset: 0,
color: '#05e8b5',
},
{
offset: 1,
color: '#fff',
},
]),
new echarts.graphic.RadialGradient(0.5, 0.4, 0.9, [
{
offset: 0,
color: '#51c4fb',
},
{
offset: 1,
color: '#fff',
},
]),
new echarts.graphic.RadialGradient(0.5, 0.4, 0.9, [
{
offset: 0,
color: '#ff58ae',
},
{
offset: 1,
color: '#fff',
},
]),
new echarts.graphic.RadialGradient(0.5, 0.4, 0.9, [
{
offset: 0,
color: '#c937e4',
},
{
offset: 1,
color: '#fff',
},
]),
];
return colorList[params.dataIndex];
},
},
symbolPosition: 'end',
data: data,
},
{
name: '',
type: 'bar',
barWidth: 70,
barGap: '-100%',
z: 10,
label: {
show: true,
formatter: '{c}%',
position: 'bottom',
distance: 20,
color: '#333',
fontSize: 18,
},
itemStyle: {
color: function (params) {
var colorList = [
new echarts.graphic.LinearGradient(0, 0, 1, 0, [
{
offset: 0,
color: '#ffc664',
},
{
offset: 0.3,
color: '#ff831f',
},
{
offset: 0.5,
color: '#ff831f',
},
{
offset: 0.7,
color: '#ff831f',
},
{
offset: 1,
color: '#ffc664',
},
]),
new echarts.graphic.LinearGradient(0, 0, 1, 0, [
{
offset: 0,
color: '#0fae8b',
},
{
offset: 0.3,
color: '#01c49a',
},
{
offset: 0.5,
color: '#01c49a',
},
{
offset: 0.7,
color: '#01c49a',
},
{
offset: 1,
color: '#0efbc7',
},
]),
new echarts.graphic.LinearGradient(0, 0, 1, 0, [
{
offset: 0,
color: '#229adf',
},
{
offset: 0.3,
color: '#2eb0ee',
},
{
offset: 0.5,
color: '#2eb0ee',
},
{
offset: 0.7,
color: '#2eb0ee',
},
{
offset: 1,
color: '#6ad1fc',
},
]),
new echarts.graphic.LinearGradient(0, 0, 1, 0, [
{
offset: 0,
color: '#fa1181',
},
{
offset: 0.3,
color: '#fd359c',
},
{
offset: 0.5,
color: '#fd359c',
},
{
offset: 0.7,
color: '#fd359c',
},
{
offset: 1,
color: '#fe7bc7',
},
]),
new echarts.graphic.LinearGradient(0, 0, 1, 0, [
{
offset: 0,
color: '#932792',
},
{
offset: 0.3,
color: '#aa2cbd',
},
{
offset: 0.5,
color: '#aa2cbd',
},
{
offset: 0.7,
color: '#aa2cbd',
},
{
offset: 1,
color: '#c382de',
},
]),
];
return colorList[params.dataIndex];
},
},
data: data,
},
{
name: '',
type: 'pictorialBar',
symbolSize: [70, 25],
symbolOffset: [0, 10],
z: 3,
itemStyle: {
opacity: 1,
color: function (params) {
var colorList = [
new echarts.graphic.LinearGradient(0, 0, 1, 0, [
{
offset: 0,
color: '#ffc664',
},
{
offset: 0.3,
color: '#ff831f',
},
{
offset: 0.5,
color: '#ff831f',
},
{
offset: 0.7,
color: '#ff831f',
},
{
offset: 1,
color: '#ffc664',
},
]),
new echarts.graphic.LinearGradient(0, 0, 1, 0, [
{
offset: 0,
color: '#0fae8b',
},
{
offset: 0.3,
color: '#01c49a',
},
{
offset: 0.5,
color: '#01c49a',
},
{
offset: 0.7,
color: '#01c49a',
},
{
offset: 1,
color: '#0efbc7',
},
]),
new echarts.graphic.LinearGradient(0, 0, 1, 0, [
{
offset: 0,
color: '#229adf',
},
{
offset: 0.3,
color: '#2eb0ee',
},
{
offset: 0.5,
color: '#2eb0ee',
},
{
offset: 0.7,
color: '#2eb0ee',
},
{
offset: 1,
color: '#6ad1fc',
},
]),
new echarts.graphic.LinearGradient(0, 0, 1, 0, [
{
offset: 0,
color: '#fa1181',
},
{
offset: 0.3,
color: '#fd359c',
},
{
offset: 0.5,
color: '#fd359c',
},
{
offset: 0.7,
color: '#fd359c',
},
{
offset: 1,
color: '#fe7bc7',
},
]),
new echarts.graphic.LinearGradient(0, 0, 1, 0, [
{
offset: 0,
color: '#932792',
},
{
offset: 0.3,
color: '#aa2cbd',
},
{
offset: 0.5,
color: '#aa2cbd',
},
{
offset: 0.7,
color: '#aa2cbd',
},
{
offset: 1,
color: '#c382de',
},
]),
];
return colorList[params.dataIndex];
},
},
data: [1, 1, 1, 1, 1],
},
{
name: '',
type: 'pictorialBar',
symbol: 'rect',
symbolSize: [70, 40],
symbolOffset: [0, 40],
z: -1,
label: {
show: true,
formatter: '{c}%',
position: 'top',
distance: -20,
color: '#fff',
fontFamily: 'FZYaoti',
fontWeight: 100,
fontSize: 20,
},
itemStyle: {
color: {
type: 'linear',
x: 0,
y: 0,
x2: 1,
y2: 0,
colorStops: [
{
offset: 0,
color: '#bbbbbb',
},
{
offset: 0.5,
color: '#e9e9e9',
},
{
offset: 0.6,
color: '#fff',
},
{
offset: 1,
color: '#e5e6e8',
},
],
global: false,
},
},
data: data4,
},
{
name: '',
type: 'pictorialBar',
symbolSize: [70, 20],
symbolOffset: [0, 30],
z: -2,
itemStyle: {
opacity: 1,
shadowBlur: 5,
shadowColor: 'rgba(90, 96, 108, .3)',
shadowOffsetY: 2,
shadowOffsetX: 15,
color: {
type: 'linear',
x: 0,
y: 0,
x2: 1,
y2: 0,
colorStops: [
{
offset: 0,
color: '#bbbbbb',
},
{
offset: 0.5,
color: '#e9e9e9',
},
{
offset: 0.6,
color: '#fff',
},
{
offset: 1,
color: '#e5e6e8',
},
],
global: false,
},
},
symbolPosition: 'end',
data: data3,
},
],
};
function run () {
var data = option.series[0].data;
for (var i = 0; i < data.length; ++i) {
if (Math.random() <= 100) {
data[i] = Math.round(Math.random() * 60);
}
else {
data[i] = Math.round(Math.random() * 80);
}
}
myChart.setOption(option);
}