Echart柱状图模板,更新中。
var cost = [1,3, 2, 4, 5]; //数据
var totalCost = [10, 10, 10, 10, 10]; //总长
var visits = [1, 2, 3, 5, 4]; //类目
var data = {
cost: cost,
totalCost: totalCost,
visits: visits,
};
option = {
backgroundColor: "#05274C",
title: {
top: "2%",
left: "center",
textStyle: {
align: "center",
color: "#4DCEF8",
fontSize: 18,
},
},
grid: {
left: "130",
right: "100",
},
xAxis: {
show: false,
},
yAxis: {
type: "category",
inverse: true, //控制y轴排序
axisLabel: {
margin: 30,
show: true,
color: "#4DCEF8",
fontSize: 14,
},
axisTick: {
show: false,
},
axisLine: {
show: false,
},
data: data.visits,
},
series: [
{
type: "bar",
barGap: "-65%",
label: {
normal: {
show: true,
position: "right",
color: "#fff",
fontSize: 14,
formatter: function (param) {
return data.cost[param.dataIndex];
},
},
},
barWidth: "30%",
itemStyle: {
normal: {
borderColor: "#4DCEF8",
borderWidth: 2,
barBorderRadius: 15,
color: "rgba(102, 102, 102,0)",
},
},
z: 1,
data: data.totalCost,
// data: da
},
{
type: "bar",
barGap: "-85%",
barWidth: "21%",
itemStyle: {
normal: {
barBorderRadius: 16,
color: function (params) {
if(params.data <= 10){
return('hsla('+ (230 - params.data * 28)+','+ '80%'+','+ '50%'+','+ (params.data*100 )+')');
}else{
return('rgba(168,25,230,100)');
}
}
},
},
max: 100,
// label: {
// normal: {
// show: true,
// position: "inside",
// formatter: "{c}",
// },
// },
labelLine: {
show: true,
},
z: 2,
data: data.cost,
},
],
};
图表
图2
let colorlist = []
function hslaTo(h) {
var h = h ;
colorlist.push(h);
return h;
}
console.log(colorlist);
var datas = [1, 2, 7, 4, 8,6,3,5,9,10,11];
var titlename = ["1", "1", "3", "4", "5","1", "1", "3", "4", "5","11"];
option = {
backgroundColor: 'rgba(0,0,0,0)',
grid: {
top: "10%",
right: "10%",
left: "10%",
bottom: "10%",
},
dataZoom: [
//滑动条
{
yAxisIndex: 0, //这里是从X轴的0刻度开始
show: false, //是否显示滑动条,不影响使用
type: "slider", // 这个 dataZoom 组件是 slider 型 dataZoom 组件
startValue: 0, // 从头开始。
endValue: 4, // 一次性展示5个。
},
],
xAxis: {
show: false,
},
yAxis: [
{
show: true,
data: titlename,
inverse: true,
axisLine: {
show: false,
},
splitLine: {
show: false,
},
axisTick: {
show: false,
},
axisLabel: {
textStyle: {
color: function (value, index) {
if(datas[index] <= 10){
return('hsla('+ (230 - datas[index] * 28)+','+ '80%'+','+ '50%'+','+ (datas[index] *100 )+')');
}else{
return('rgba(168,25,230,100)');
}
},
},
formatter: function (value, index) {
return ["{title|" + value + "} "].join("\n");
},
rich: {},
},
},
{
show: true,
inverse: true,
data: datas,
axisLabel: {
textStyle: {
color: function (value, index) {
if(value <= 10){
return('hsla('+ (230 - value * 28)+','+ '80%'+','+ '50%'+','+ (value *100 )+')');
}else{
return('rgba(168,25,230,100)');
}
},
},
},
axisLine: {
show: false,
},
splitLine: {
show: false,
},
axisTick: {
show: false,
},
},
],
series: [
{
name: "条",
type: "bar",
yAxisIndex: 0,
data: datas,
barWidth: '40%',
itemStyle: {
normal: {
barBorderRadius: 30,
color: function (params) {
if(params.data <= 10){
let a = ('hsla('+ (230 - params.data * 28)+','+ '80%'+','+ '50%'+','+ (params.data *100 )+')');
return(hslaTo(a));
}else{
let a = 'rgba(168,25,230,100)'
return(hslaTo(a));
}
},
},
},
label: {
normal: {
show: true,
position: 'right',
formatter: "{c}",
},
},
},
],
};
setInterval(function () {
// 每次向后滚动一个,最后一个从头开始。
// console.log(option.dataZoom[0].endValue);
// console.log("---"+KSMC.length);
if (option.dataZoom[0].endValue == datas.length) {
option.dataZoom[0].endValue = 4;
option.dataZoom[0].startValue = 0;
} else {
option.dataZoom[0].endValue = option.dataZoom[0].endValue + 1;
option.dataZoom[0].startValue = option.dataZoom[0].startValue + 1;
}
myChart.setOption(option);
}, 10000);
图表