option参数说明
X轴/Y轴(他们的选项一致)
xAxis/yAxis: {
name:'名称', // 名称
// 坐标轴名称的文字样式
nameTextStyle: {
color: '#999',
align: 'right',
padding: [3, 6, 5, 6],
},
type: 'category', // 类型
data: ['Mon', 'Tue', 'Wed', 'Thu'], // 数据
axisTick:{ // 是否显示坐标轴刻度
show:false
},
axisLabel: { // 坐标刻度相关信息
show: true, // 显示隐藏坐标刻度的信息
textStyle: { //坐标刻度文字样式
color:"#f40"
}
},
axisLine:{ // 线条颜色更改
lineStyle:{
color:'#999'
}
},
splitLine:{ // 网格状态
show:false, // 是否显示网格
lineStyle: { // 网格线类型
type: 'dashed',
},
}
},
series不同图表/形系列的样式
series:[
{
data: [300, 300], // 数据
center: ['55%', '60%'], // 饼状图位置调整
type: 'line', // 类型
symbol: 'none', // 折线图中不显示折线中的小圆点 也可以选择例如 symbol:'circle'
smooth: true, // 折线图中是否平滑曲线显示。
symbolSize: 8, // 折线图中小圆点的大小
stack: 'Ad', // 柱状图是否推叠在一起（数据堆叠） 名称一致就可以 例如多个柱状图stack都叫ad
avoidLabelOverlap: false, // 饼图防止标签重叠 默认开启
barWidth: 30, // 柱状图宽度
barGap: '0' /*柱状图多个并排柱子设置柱子之间的间距*/,
barCategoryGap: '0%' /*柱状图多个并排柱子设置柱子之间的间距*/,
itemStyle: {
// 图形的颜色 可以统一设置 在最外层(和 series同级) color:['#f40','#ccc',]
color: '#F2597F',
},
label: {
// 图形上的文本标签，可用于说明图形的一些数据信息，比如值，名称等
show: true,
interale: 0,
rotate: 40,
position: 'top',
fontSize: '14',
distance: 10, // 文字距离图形元素的距离
},
emphasis: {
// 鼠标移动到图形上的高亮状态
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)',
},
},
areaStyle: {
// 线图区域填充折的渐变色
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: 'rgba(213,72,120,0.8)',
},
{
offset: 1,
color: 'rgba(213,72,120,0.3)',
},
]),
},
// 线图区域填充折的渐变色的另一种方式
// areaStyle: {
// normal: {
// color: {
// colorStops: [
// {
// offset: 0,
// color: '#f0f5ff', // 0% 处的颜色
// },
// {
// offset: 0.7,
// color: '#f0f5ff', // 100% 处的颜色
// },
// ],
// globalCoord: false, // 缺省为 false
// },
// },
// },
lineStyle: {
// 折线图线条颜色
color: '#f67979',
width: 1,
},
/* 下面这套配合下来 可以让鼠标在移动时候产生小圆点 原理就是 symbolSize: 1 然后再自定义大小*/
symbolSize: 1,
animation: true,
itemStyle: {
normal: {
color: 'rgba(54, 120, 254, 1)',
label: {
// 控制数值是否在图表grid中显示
interale: 0,
show: false,
color: 'rgba(54, 120, 254, 1)',
position: 'top',
fontSize: '14',
fontWeight: '600',
},
},
// 圆点样式控制 默认是空心的
emphasis: {
color: 'rgba(54, 120, 254, 1)',
borderColor: 'rgba(54, 120, 254, 1)', // 图形的描边颜色
borderWidth: 6, // 描边的线宽
shadowBlur: 15, // 图形的阴影大小
shadowColor: '#fff', // 图形的阴影颜色
z: 9,
},
},
},
]
tooltip鼠标移动到组件上是否显示提示框
tooltip: {
trigger: 'item', // 显示类型 例如还有 trigger: 'axis'（这个在饼图中不会起作用可在线型图中有效）
showDelay: 20, // 显示延迟，添加显示延迟可以避免频繁切换，单位ms
hideDelay: 20, // 隐藏延时
axisPointer: {
type: 'line',
lineStyle: {
// 线的颜色 类型等属性
type: 'solid',
},
z: 2, // 坐标轴指示器的 z 值。控制图形的前后顺序。z值小的图形会被z值大的图形覆盖
},
// textStyle: {
// color: '#f40',
// },
// 提示框浮层内容格式器，支持字符串模板和回调函数两种形式
formatter: data => {
const tempArr = []
if (data && data.length) {
data.forEach(series => {
tempArr.push('<div style="width: 100%;color:#666;font-size:12px;">当日最高</div>')
tempArr.push(`<div style="color:#3376FE;font-size:20px;">${series.value}</div>`)
})
}
return tempArr.join('')
},
// 鼠标移动上去的浮层背景色
backgroundColor: 'rgba(255, 255, 255, 1)',
// 浮层内容的样式 例如内容排版内容颜色
extraCssText: 'line-height: 26px; box-shadow: 0px 6px 24px 0px rgba(37, 37, 37, 0.16); border-radius: 4px;',
},
title标题
title: {
text: '昨日退货产品金额', // 标题
top: 15,
left: 10,
subtext: `${727}`, // 副标题
textStyle: {
// 标题样式
color: '#666',
fontSize: 18,
},
subtextStyle: {
// 副标题样式
color: '#333',
fontSize: 30,
},
},
grid坐标系网格位置宽度等信息
grid: {
width:'100px',// 不写默认自适应
top: '90px',
bottom: '30px',
left: '50px',
right: '20px'
},
legend图列组件（常用在柱状图）可以通过点击图例控制哪些系列不显示
（就是上方带颜色块状元素点击可以显示隐藏网格中元素是否显示）
legend: {
type: 'scroll',
top: 50,
right:20,
itemGap:10,
itemWidth:12,
itemHeight:12,
},
dataZoom滑块 滑动可以看grid内容区间的数值变化
dataZoom: [
{
type: 'slider', //滑动条类型
realtime: true, //滑动是否实时响应 还是滑动完再响应
orient:'vertical', // 布局方向 默认横向 写了这个'vertical'参数为竖向
filterMode: 'empty', // 过滤数据的方式
showDataShadow: true,//在滑动轴上是否显示数据趋势阴影
/* 滑动条位置 */
left:10,
right: 6,
top: 20,
bottom: 22,
/* 数值起始位置设定（刚开始默认展示那个区段） */
startValue:12,
endValue:100,
},
],
