echarts x轴加箭头_【Echarts】echarts tooltip小箭头,及阴影样式修改,双Y轴显示,折线图和柱状图同时展示,legend分开展示...

0827bc8fa9161dd2ef190a6eb76bd3b8.png

8650f56bcb6e30c30fe23ab08109cc70.png

9a9d6c43f05d2055e1c06cad3ceae2df.png86d648b03a91dd4ec1bb50d49b3b0db5.png

48e18c910581c21016635b9ceac92874.png

this.circleChart = {

tooltip: {

trigger: 'item',

backgroundColor: '#fff',

textStyle: {

color: '#666',

fontSize: 14,

lineHeight: 16

},

confine: true,

formatter:

'{a}

{b} : {c} ({d}%)'

},

series: [

{

name: name || '',

type: 'pie',

silent: true,

label: {

normal: {

show: false

}

},

radius: ['0%', '100%'], // 半径

center: ['50%', '50%'], // 位置

color: 'rgba(181,221,245, 0.5)',

data: [{ value: 100, name: '闭环' }]

},

{

name: name || '',

type: 'pie',

radius: ['32%', '63%'], // 半径

center: ['50%', '50%'], // 位置

label: {

normal: {

formatter: '{b}'

}

},

color: SimpleAccidentAnalysisComponent.colors,

data: seriesData || seriesData1,

itemStyle: {

emphasis: {

shadowBlur: 10,

shadowOffsetX: 0,

shadowColor: 'rgba(0, 0, 0, 0.5)'

}

}

}

]

};

this.cllxChart = {

title: {

show: true,

text: '类型统计分析',

textStyle: {

fontSize: 14

},

left: '15',

top: '10'

},

grid: {

left: 20,

right: 30,

bottom: 0,

top: 60,

containLabel: true

},

tooltip: {

// 鼠标移入的住

trigger: 'axis',

backgroundColor: '#fff',

axisPointer: {

type: 'shadow', // 默认为直线,可选为:'line' | 'shadow'|'cross' cross为混合显示

shadowStyle: {

color: 'rgba(127,196,251,0.3)'

}

},

confine: true,

formatter: params => {

console.log(params);

params.shift();

let cusSpan = '',

firstDiv = '';

params.forEach((element, index) => {

firstDiv =

'

' +

'' +

element.value +

'';

cusSpan += firstDiv;

});

// console.log(cusSpan);

return (

'

' +

'

统计时间:2020/02/14

2020/02/24

类型:' +

'大雪' +

'' +

cusSpan +

''

);

}

},

// 图例相关的东西

legend: {

x: 'right',

icon: 'rect',

padding: [0, 50, 0, 0],

itemHeight: 12, // 改变icon大小

textStyle: {

fontSize: 12

},

top: '20',

data: [

'事故数量(起)趋势',

'环比增长率(%)',

'同比增长率(%)'

]

},

xAxis: [

{

type: 'category',

data: [

'1月',

'2月',

'3月',

'4月',

'5月',

'6月',

'7月',

'8月',

'9月',

'10月',

'11月',

'12月'

],

axisPointer: {

type: 'shadow'

}

}

],

yAxis: [

{

type: 'value',

// name: '水量', // y轴单位

// min,max会自己计算的,但是间隔会丑,否则就自己循环对比数据得出

min: 0,

max: 250,

interval: 50,

axisLabel: {

formatter: '{value}'

}

},

{

type: 'value',

// name: '温度',

min: 0,

max: 25,

interval: 5,

offset: 30, // 两个y轴得偏移一下,才能不覆盖

position: 'left', // 将y轴的位置移到同一侧

axisLabel: {

formatter: '{value} %'

},

axisLine: {

show: false // 取消y轴

},

axisTick: {

show: false // 取消y轴的刻度线

}

}

],

color: AccidentEportraitAnalysisComponent.lxtjColor,

series: [

{

name: '事故数量(起)趋势',

type: 'bar',

data: [

2.0,

4.9,

7.0,

23.2,

25.6,

76.7,

135.6,

162.2,

32.6,

20.0,

6.4,

3.3

],

itemStyle: {

color: new (echarts as any).graphic.LinearGradient(

0,

0,

0,

1,

[

{ offset: 0, color: '#80C5FC' },

{ offset: 1, color: '#007FDA' }

]

)

}

},

{

name: '事故数量(起)趋势',

type: 'line',

smooth: true,

data: [

2.0,

4.9,

7.0,

23.2,

25.6,

76.7,

135.6,

162.2,

32.6,

20.0,

6.4,

3.3

]

},

{

name: '环比增长率(%)',

type: 'line',

smooth: true,

data: [

2.6,

5.9,

9.0,

26.4,

28.7,

70.7,

175.6,

182.2,

48.7,

18.8,

6.0,

2.3

]

},

{

name: '同比增长率(%)',

type: 'line',

smooth: true,

yAxisIndex: 1,

data: [

2.0,

2.2,

3.3,

4.5,

6.3,

10.2,

20.3,

23.4,

23.0,

16.5,

12.0,

6.2

]

}

]

};

.tooltip-div {

border: 1px solid #d9d9d9;

z-index: 111;

padding: 10px;

background: #fff;

font-size: 10px;

text-align: left;

min-width: 150px;

border-radius: 3px;

color: #666;

}

.tooltip-div :after {

content: '';

position: absolute;

border: 10px solid transparent;

border-top-color: #fff;

top: 103%;

left: 28px;

}

表情包
插入表情
评论将由博主筛选后显示,对所有人可见 | 还能输入1000个字符
相关推荐
©️2020 CSDN 皮肤主题: 数字20 设计师:CSDN官方博客 返回首页