option = {
//你的代码
// x轴配置
// #####################################################
xAxis: {
type: 'category', // 类目轴
boundaryGap: true, // 设置为true 不从x轴的原点开始
data: ['10月21日', '10月22日', '10月23日', '10月24日', '10月25日', '10月26日', '10月27日'],
axisLabel: { // 坐标轴刻度标签的相关设置
interval: 0, // 开始时x轴的刻度显示不全,因为文字过长超过了label长度
// rotate: 45, // 逆时针旋转45°,这里可以不加,不加也能完整的显示出效果
textStyle: {
color: '#9DCFFF',
fontSize: 10
}
},
axisLine: { // 坐标轴轴线
show: true,
lineStyle: {
color: '#333',
type: 'solid', // 默认是实线
}
},
axisTick: {
alignWithLabel: true,
},
},
// Y轴相关的配置项
yAxis: {
type: 'value',
name: '元',
nameTextStyle: {
color: '#9DCFFF',
fontStyle: 'italic',
fontWeight: 'normal',
width: 10,
height: 10,
padding: [0, 35, 0, 0] // 这个边距需要写的大点,否则看不出效果!
},
min: 0,
max: 500,
splitNumber: 6, // 坐标刻度分段
// 坐标轴轴线相关配置 axisLine
axisLine: {
show: true,
// symbol:['none', 'arrow'], // 显示Y轴上方的单箭头 默认'none'显示
symbolSize: [10, 10], // 箭头的宽度和高度
lineStyle: { // 坐标轴相关配置
color: '#333', // 坐标轴轴线的颜色
}
},
// ############
axisTick: { // 坐标轴刻度相关配置
show: false, // 不显示默认的Y轴坐标轴刻度线
inside: true, // 如果显示设置刻度线朝里
},
// ##############
minorTick: { // 次刻度线相关配制 ----> 在主刻度线之间出现一些小的刻度线
show: false, // 默认是false
splitNumber: 3 // 设置此刻度分段数,默认为三段
},
// ##########
axisLabel: { // 坐标轴刻度标签相关设置
// Y坐标轴是否显示刻度标签,默认为true,如果设置为false的话刻度值就会消失
show: true,
inside: false, // 刻度标签朝里或者朝外,true朝里,默认是朝外
color: '#9DCFFF',
fontSize: 10,
align: 'right', // 默认值是right
verticalAlign: 'middle', // 默认值是middle
},
// #########
splitLine: { // 坐标轴在grid区域的分割线
show: true,
lineStyle: { // 分割线的样式
color: '#ccc',
width: 1, // 分割线线宽,默认是1
type: 'solid',
opacity: 0.3, // 格子的透明度
}
},
// 坐标轴指示器配置项
axisPointer: {
show: true, // 默认为false,鼠标放到图形上会出现指示器
type: 'line',
label: {
show: false, // 设置为false旁边的方块就没有了
},
lineStyle: { // type为line时有效,设置的时线的样式
color: '#ccc',
opacity: 0.5
},
},
},
// 图例相关配置项
legend: {
type: 'plain',
show: true,
itemGap: 15, // 图例之间的间距
top: 10, // 图例距离上方的距离
data: [
{
name: '发电量', // name必须和series中的那么对应,否则就会失效
icon: 'roundRect',
textStyle: {
color: '#333' // 图例的字体颜色,默认颜色为黑色
},
},
{
name: '生产收益',
// icon:'roundRect',
textStyle: { // 文本样式
color: '#333'
}
}
],
itemStyle: {},// 图例的图形样式
itemWidth: 8, // 图例宽度
itemHeight: 14, // 图例高度
align: 'auto', // 决定图例在文字的左侧还是右侧
},
series: [
// 柱状图#########################################
{
type: 'bar',
data: [215, 420, 390, 180, 410, 250, 400],
name: '发电量',
showBackground: true, // 是否显示柱条的背景色
backgroundStyle: { // 只有和showBackground为true搭配使用才会生效
color: '#021347', // 柱条的背景色为#021347
opacity: 0.5
},
labelLine: {
show: true
},
cursor: 'pointer',
barWidth: 15, // 设置柱子的宽度,
itemStyle: { // 图形样式 ----> 配置柱状图渐变颜色,新版Echarts官网写法,之前的写法会报错
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [{
offset: 0, color: '#00c5ff' // 0% 处的颜色
}, {
offset: 1, color: '#0058ff' // 100% 处的颜色
}],
global: false // 缺省为 false
}
},
},
// 折线图#######################################
{
data: [295, 300, 400, 350, 250, 410, 300, 250, 410],
type: 'line',
name: '生产收益',
// 设置线条样式
lineStyle: {
color: '#FFD21E' // 线条颜色
},
itemStyle: {
opacity: 0 // 透明度为0,将拐点去掉
}
}
]
};