双轴图表2echarts #333配置项内容和展示
配置项如下
option = {
"backgroundColor": "",
"color": [
"#F6856E",
"#FFC533",
"#56C994",
"#72A9FE",
"#ffa43a"
],
"title": {
},
"legend": {
"orient": "horizontal",
"data": [
{
"name": "高危"
},
{
"name": "中危"
},
{
"name": "安全"
},
{
"name": "未知"
},
{
"name": "中招率"
}
],
"left": 0,
"top": "4%",
"textStyle": {
"color": "#666",
"fontSize": 14
}
},
"grid": {
left: '2%',
right: '4%',
bottom: '6%',
top:'16%',
"containLabel": true
},
"tooltip": {
"trigger": "axis",
"axisPointer": {
"type": "shadow"
},
"textStyle": {
"align": "left"
}
},
"xAxis": [
{
"type": "category",
"data": [
'产品部', '技术部', '销售部', '人事部', '售前部', '售后部', '市场部', '平台部', '测试部', '运维部'
],
"axisTick": {
"show": false,
},
"axisLine": {
"show": true,
lineStyle: {
color: '#cdd5e2'
}
},
"axisLabel": {
"show": true,
"textStyle": {
"color": "#282828",
"fontSize": 14
},
"formatter": "{value}"
},
}
],
"yAxis": [
{
"type": "value",
"max": "30",
"axisTick": {
"show": false
},
"axisLine": {
"show": true,
lineStyle: {
color: '#cdd5e2'
}
},
"axisLabel": {
"show": true,
"textStyle": {
"color": "#282828",
"fontSize": 14
}
},
"splitLine": {
"show": false,
"lineStyle": {
"color": "rgba(255,255,255,0.2)"
}
}
},
{
type: "value",
name: "百分比",
"max": "100",
nameTextStyle: {
color: "#666666"
},
position: "right",
axisLine: {
lineStyle: {
color: '#cdd5e2'
}
},
splitLine: {
show: false,
},
axisLabel: {
show: true,
formatter: "{value} %", //右侧Y轴文字显示
textStyle: {
color: "#666666",
fontSize:14,
}
}
}
],
dataZoom: [
{
show: true,
realtime: true,
"height": 12,
start: 0,
end: 70,
bottom:'2%',
},
{
type: 'inside',
realtime: true,
"height": 12,
start: 0,
end: 70
}
],
"series": [
// {symbol: 'circle'},
{
"name": "高危",
"type": "bar",
"stack": "总量",
"barWidth": "40%",
"data": [
"2",
"3",
"4",
"5",
"2",
"3",
"4",
"5",
"2",
"3",
],
itemStyle: {
normal: {
label: {
show: true, //开启显示
//
textStyle: { //数值样式
color: '#333',
fontSize: 14
}
}
}
}
},
{
"name": "中危",
"type": "bar",
"stack": "总量",
"barWidth": "40%",
"data": [
"2",
"3",
"4",
"5",
"2",
"3",
"4",
"5",
"2",
"3",
],
itemStyle: {
normal: {
label: {
show: true, //开启显示
textStyle: { //数值样式
color: '#333',
fontSize: 14
}
}
}
}
},
{
"name": "安全",
"type": "bar",
"stack": "总量",
"barWidth": "40%",
"data": [
"2",
"3",
"8",
"5",
"2",
"3",
"4",
"5",
"2",
"3",
],
itemStyle: {
normal: {
label: {
show: true, //开启显示
textStyle: { //数值样式
color: '#333',
fontSize: 14
}
}
}
}
},
{
"name": "未知",
"type": "bar",
"stack": "总量",
"barWidth": "40%",
"data": [
"2",
"3",
"4",
"5",
"5",
"3",
"4",
"5",
"2",
"3",
],
itemStyle: {
normal: {
label: {
show: true, //开启显示
// position: 'top', //在上方显示
textStyle: { //数值样式
color: '#333',
fontSize: 14
}
}
}
}
},
{
name: "中招率",
type: "line",
yAxisIndex: 1, //使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用
smooth: false, //平滑曲线显示
symbol: "circle", //标记的图形为实心圆
symbolSize: 8, //标记的大小
itemStyle: {
normal: {
color: '#ffa43a',
borderColor: 'rgba(255, 234, 0, 0.5)', //圆点透明 边框
borderWidth: 7
},
},
lineStyle: {
color: "#ffa43a"
},
data: ["20",
"30",
"40",
"50",
"20",
"30",
"40",
"50",
"20",
"30",]
}
// {
// "name": "中招率",
// "type": "line",
// symbol: 'circle',
// "data": [
// "20",
// "30",
// "40",
// "50",
// "20",
// "30",
// "40",
// "50",
// "20",
// "30",
// ],
// }
]
}
截图如下
