function initEchart() {
// 基于准备好的dom,初始化echarts实例
var myChart = echarts.init(document.getElementById('qualityChartsZ'));
// 指定图表的配置项和数据
var option = {
tooltip: {
trigger: 'axis',
backgroundColor: '#f9fbfe',
padding: 15,
textStyle: {
color: '#333'
},
// formatter: "{a} <br/>{b} : {c} ({d}%)",
extraCssText: 'box-shadow: 0 0 3px 1px rgba(230, 230, 230, 0.8);'
},
color: ['#efb724', '#5e8dff'],
legend: {
data: ['质检项1', '质检项3'],
textStyle: {
fontSize: 14,
color: '#333333'
},
itemGap: 30, //每项之间间隔
bottom: 10,
icon: 'circle',
itemWidth: 12, // 设置宽度
itemHeight: 12, // 设置高度
},
dataset: {
dimensions: ['product', '质检项1', '质检项3'],
source: [
{ product: '2021-08-01', '质检项1': 43.3, '质检项3': 85.8 },
]
},
xAxis: {
type: 'category',
axisTick: { //y轴刻度线
"show": false
},
axisLine: {
lineStyle: {
type: 'solid',
color: '#b7bbc3',
width: '1' //坐标线的宽度
}
},
axisLabel: { //y轴坐标文字
textStyle: {
color: '#211e1e', //坐标值的具体的颜色
fontSize: 12
}
}
},
yAxis: {
type: 'value',
splitLine: {
show: false
}, //网格线
axisLine: {
lineStyle: {
type: 'solid',
color: '#b7bbc3',
width: '1' //坐标线的宽度
}
},
axisLabel: { //y轴坐标文字
formatter: '{value}%',
textStyle: {
color: '#211e1e', //坐标值的具体的颜色
fontSize: 12
},
},
splitLine: {
show: true,
lineStyle: { // 使用深浅的间隔色
color: '#e6eaf5',
type: "dashed"
}
},
axisTick: { //y轴刻度线
"show": false
}
},
grid: {
left: 0,
right: 0,
top: 40,
containLabel: true
},
series: [
{
name: "质检项1",
type: 'bar',
barWidth: 15, //柱图宽度
// data: data.accessData
},
{
name: '质检项3',
type: 'bar',
barWidth: 15, //柱图宽度
// data: data.manualData
}
]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
}
记录echarts图表的一些配置修改
于 2021-08-25 15:57:08 首次发布