option = {
title: {
text: '周转率', //图表标题
textStyle : {
color : '#eaba2c',
fontSize : 24,
fontWeight : 'normal',
},
},
tooltip: {
// trigger: 'axis', //坐标轴触发，主要在柱状图，折线图等会使用类目轴的图表中使用
type: 'cross', // 默认为直线指示器，可选为：'line' | 'shadow'阴影指示器 | 'none'无指示器 | 'cross'十字准星指示器
label: {
backgroundColor: 'rgba(0, 0, 0, 0.6)'
}
/**
* 模板变量有 {a}, {b}，{c}，{d}，{e}，分别表示系列名，数据名，数据值等。
* 在 trigger 为 'axis' 的时候，会有多个系列的数据，此时可以通过 {a0}, {a1}, {a2} 这种后面加索引的方式表示系列的索引。
* 不同图表类型下的 {a}，{b}，{c}，{d} 含义不一样。 其中变量{a}, {b}, {c}, {d}在不同图表类型下代表数据含义为：
*
* 折线（区域）图、柱状（条形）图、K线图 : {a}（系列名称），{b}（类目值），{c}（数值）, {d}（无）
*
* 散点图（气泡）图 : {a}（系列名称），{b}（数据名称），{c}（数值数组）, {d}（无）
*
* 地图 : {a}（系列名称），{b}（区域名称），{c}（合并数值）, {d}（无）
*
* 饼图、仪表盘、漏斗图: {a}（系列名称），{b}（数据项名称），{c}（数值）, {d}（百分比）
*
*/
formatter: "{b} <br/>{a0} : {c0}万度 <br/>{a1} : {c1}万升 ",
},
legend: { //图例
data:['周转率'], //和series.name值一样才会显示
right: '10%',
orient: 'vertical',
left: 'right', //当组件的 left 值为 'right' 以及纵向布局（orient为'vertical'）的时候为右对齐, 且right值失效
top: '0%', //图例距离容器顶部的距离
textStyle : { //图例样式
color : '#000',
fontSize : 16,
},
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true //grid 区域是否包含坐标轴的刻度标签
},
xAxis: {
name: '名称',
type: 'category',
// boundaryGap: false, //x轴是否从0刻度开始
data: ['一季度','二季度','三季度','四季度'],
axisLine: { //轴线
symbol:['none','arrow'],
symbolSize:[6, 10],
lineStyle: { //轴线样式
type: 'solid',
color: '#000',
},
},
splitLine: { //分割线
lineStyle: { //分割线样式
type: 'dotted',
color: '#000',
}
},
axisLabel : { //轴线上数据样式
interval: 0, //坐标轴刻度标签的显示间隔
// rotate: 40, //x轴数据显示不全，向左侧倾斜显示
textStyle : {
color : '#000',
fontSize : 16,
},
// formatter:function(value){ //坐标轴竖排显示
// return value.split("").join("\n");
// },
},
axisTick:{
show:false, //是否显示刻度线
},
},
yAxis: {
type: 'value',
// splitNumber: 3, //坐标轴的分割段数[ default: 5 ]
minInterval: 5, //坐标轴最小间隔大小[ default: 0 ]
axisLine: { //轴线
symbol:['none','arrow'],
symbolSize:[6, 10],
lineStyle: { //轴线样式
type: 'solid',
color: '#000',
}
},
splitLine: { //分割线
lineStyle: { //分割线样式
type: 'dotted',
color: '#000',
}
},
axisLabel : { //轴线上数据样式
formatter : '{value} %', //为y轴数值添加百分号%
textStyle : {
color : '#000',
fontSize : 16,
},
},
axisTick:{
show:false, //是否显示刻度线
},
},
series: [
{
name:'周转率',
type:'line',
//type:'bar',
//barWidth: '30%', //type值为'bar'(柱状图)时使用，表示柱状图宽度
//stack: '总量', //堆叠柱状图
data:[20, 16, 38, 30],
symbol:'circle', //折线图折点形状,默认为空心圆emptyCircle
symbolSize : 6, //折线图上圆点的大小
itemStyle : {
normal : {
color : '#d87f20', //折线图圆点颜色
lineStyle : {
color : '#d87f20', //折线图折线颜色
width : 2, //折线图折线粗细
},
barBorderRadius: [0, 0, 0, 0], //设置圆角角度为0
// 柱状图渐变色
// 前4个参数用于配置渐变色的起止位置, 这4个参数依次对应右/下/左/上四个方位. 而0 0 0 1则代表渐变色从正上方开始. 第5个参数则是一个数组, 用于配置颜色的渐变过程. 每一项为一个对象, 包含offset和color两个参数. offset的范围是0 ~ 1, 用于表示位置, color表示颜色
// color: new echarts.graphic.LinearGradient(
// 0, 0, 0, 1,
// [
// {offset: 0, color: '#E90DA8'},
// {offset: 0.5, color: '#F12D60'},
// {offset: 1, color: '#F12D60'}
// ]
// ),
// opacity: 0.85,
}
},
// label: { //柱状图上显示数值
// normal: {
// show: true,
// position: 'top', //图表显示数值位置
// distance: 6, //图表显示数值距离图形元素的距离[default: 5]
// textStyle : {
// fontSize : 16, //柱状图上显示数值字体大小
// },
// }
// },
},
]
};
