let axisData = ["企业财产保险", "家庭财产保险", "机动车辆保险", "工程保险", "责任保险", "信用保险", "船舶保险", "货运险", "121212", "232323232", "3434344", "454545", "565656", "67676776"]
let seriesData = [
{
name: "保费增速",
value: [1.52, 6.13, -4.76, -2.01, 2.02, 3.56, 4.58, 7.88, 7.88, 2.53, -2.36, -4.5, 4.5, 1.5]
},
{
name: "保额增速",
value: [9.96, 6.02, 4.68, 5.23, 2.36, 3.25, 4.25, 6.99, 3.22, 1.56, 2.35, 4.22, 5.88, -2.3]
},
{
name: "赔付增速",
value: [4.96, -6.02, -4.68, 2.45, -2.33, -5.22, 6.88, 2.33, 5.32, 6.32, -1.22, -3.22, 2.56, 6.89]
},
]
let borderColor = ['#00EAFF', '#00A4FF']
let dataColor = ['rgba(0,161,182,0.7)', 'rgba(0,58,168,0.7)']
let axisLabelSize = 20
let currentChartData = {
axisData: axisData.slice(0, 7),
seriesData: [
{
name: "保费增速",
value: seriesData[0].value.slice(0, 7)
},
{
name: "保额增速",
value: seriesData[1].value.slice(0, 7)
},
{
name: "赔付增速",
value: seriesData[2].value.slice(0, 7)
},
],
}
let colorArr = [
["#F4CB46", "#E68A55"],
["#99D17B", "#52CBC8"],
["rgba(21,46,87,0.5)", "#3207BF", "rgba(33,48,121,0.35)"]
]
option = {
tooltip: {
show: true,
trigger: 'axis',
axisPointer: { // 坐标轴指示器，坐标轴触发有效
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
}
},
//图标离容器的距离
grid: {
left: '4%',
right: '0%',
bottom: '5%',
top: '15%',
containLabel: true,
},
legend: {
data: seriesData,
right: '0%',
top: '0%',
align: 'left',
icon: 'rect',
itemWidth: 33,
itemHeight: 12,
borderRiudis: '50%',
textStyle: {
fontSize: 20,
fontFamily: 'siyuan',
color: '#fff',
fontWeight: 'bold',
}
},
xAxis: {
type: "category",
axisLine: {
show: false, //隐藏X轴轴线
lineStyle: {
color: '#555f58'
}
},
axisLabel: {
interval: 0,
// formatter: (name) => {
// return `${name}年`
// },
textStyle: {
fontSize: 20,
fontFamily: 'siyuan',
color: '#fff',
fontWeight: 'bold',
},
margin: 15
},
axisTick: {
show: false //隐藏X轴刻度
},
splitLine: { //网格线
show: false
},
data: axisData,
},
yAxis: {
axisLine: {
show: false, //隐藏X轴轴线
lineStyle: {
// color: 'rgba(220,220,220,0.3)'
color: '#4382CB'
}
},
axisTick: {
show: false //隐藏X轴刻度
},
axisLabel: {
textStyle: {
fontSize: 20,
fontFamily: 'siyuan',
color: '#fff',
fontWeight: 'bold',
}
},
splitLine: { //网格线
show: true,
lineStyle: {
// color: 'rgba(220,220,220,0.3)'
color: '#4382CB'
}
}
},
series: [
{
name: seriesData[0].name,
type: "bar",
barWidth: 19,
data: seriesData[0].value,
itemStyle: colorArr[0].length == 3 ? {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: colorArr[0][0],
},
{
offset: 0.5,
color: colorArr[0][1]
},
{
offset: 1,
color: colorArr[0][2]
}]),
}
} : {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: colorArr[0][0],
},
{
offset: 1,
color: colorArr[0][1]
}]),
}
},
}, {
name: seriesData[1].name,
type: "bar",
barWidth: 19,
data: seriesData[1].value,
itemStyle: colorArr[1].length == 3 ? {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: colorArr[1][0],
},
{
offset: 0.5,
color: colorArr[1][1]
},
{
offset: 1,
color: colorArr[1][2]
}]),
}
} : {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: colorArr[1][0],
},
{
offset: 1,
color: colorArr[1][1]
}]),
}
},
},
{
name: seriesData[2].name,
type: "bar",
barWidth: 19,
data: seriesData[2].value,
itemStyle: colorArr[2].length == 3 ? {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: colorArr[2][0],
},
{
offset: 0.5,
color: colorArr[2][1]
},
{
offset: 1,
color: colorArr[2][2]
}]),
}
} : {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: colorArr[2][0],
},
{
offset: 1,
color: colorArr[2][1]
}]),
}
},
},
]
};
setInterval(function () {
// var dataLen = _this.chart.option.xAxis.data.length;
var dataLen = chartData.axisData.length
// 取消之前高亮的图形
chart.dispatchAction({
type: 'downplay',
seriesIndex: 0,
dataIndex: app.currentIndex
});
app.currentIndex = (app.currentIndex + 1) % dataLen;
//console.log(app.currentIndex);
// 高亮当前图形
chart.dispatchAction({
type: 'highlight',
seriesIndex: 0,
dataIndex: app.currentIndex,
});
// 显示 tooltip
chart.dispatchAction({
type: 'showTip',
seriesIndex: 0,
dataIndex: app.currentIndex
});
// 以上为当前选中高亮
// 以下为一个一个往后跑
let maxlength = 15
if (option.series[0].data.length < maxlength) {
var data0 = option.series[0].data;
var data1 = option.series[1].data;
var data2 = option.series[2].data;
data0.shift();
data0.push(12);
data1.shift();
data1.push(15);
data2.shift();
data2.push(-4);
option.xAxis.data.shift();
option.xAxis.data.push(1);
chart.setOption(option);
}
}, 1000);