标题的各类效果 字号 颜色 描边 对齐 ....
title: {
text: '入门示例',
textStyle: {
color: '#f35' ,
textBorderColor:'#000',
textBorderWidth:1,
},
textAlign: 'auto',
borderColor: '#f35',
borderWidth: 1 ,
borderRadius:4,
}, 
legend: {//图例组件。图例组件展现了不同系列的标记(symbol)，颜色和名字。可以通过点击图例控制哪些系列不显示。
data: ['销量','热度']
},
toolbox:{// 工具栏。内置有导出图片，数据视图，动态类型切换，数据区域缩放，重置五个工具。
feature:{
saveAsImage: {},//导出图片
dataView: {},//数据视图
restore:{},//重置
dataZoom:{},//数据区域缩放
magicType: {//动态类型切换
type:['bar','line']
}
}
}, 
这里有两类数据 销量和热度 arg就是当前item 类目的数组
label 标签 决定是否显示 显示在 柱状图/上部/内部/外部 还可以指定旋转角度
tooltip: {// 提示框组件。// trigger:'item' 默认的鼠标移动到色块上触发
trigger:'axis', // 鼠标只要在轴上就会触发
triggerOn:'click', // 触发方式 一般不用 click 简化用户操作
//formatter:`{a}（系列名称），{b}（类目值），{c}（数值）` 点击时的回调 可以是模板字符串 也可以是函数
formatter:function (arg) {
return arg[1].name + arg[1].data
}
},
label:{ // 柱状图 内部 显示数值
show:true,
rotate:30,
}, 
// X Y 轴数据互换可以 变成横向柱状图
xAxis: { // X Y 轴数据互换可以 变成横向柱状图
},
yAxis: {
data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
}, 
series 系列数组里有两组对象 第一个销量里添加了 标识 最大值 和最小值的功能以及 标注平均值虚线
series: [// 核心设置 系列
{
name: '销量',
type: 'bar',
data: [157, 256, 789, 70, 450, 120],
markPoint:{ // 标注最大值和最小值
data:[
{
type:'max',name: '最大值'
},
{
type:'min',name: '最小值'
}
]
},
markLine:{ // 设置平均值
data:[
{
type:'average',name:'平均值'
}
]
}
},
{
name: '热度',
type: 'bar',
data: [257, 156, 489,170, 250, 180],
}
]
};为了演示多一些 效果堆叠起来了 样子有点丑 下面展示全貌和完整的配置
let options1 = {
title: {
text: '入门示例',
textStyle: {
color: '#f35' ,
textBorderColor:'#000',
textBorderWidth:1,
},
textAlign: 'auto',
borderColor: '#f35',
borderWidth: 1 ,
borderRadius:4,
},
tooltip: {// 提示框组件。// trigger:'item' 默认的鼠标移动到色块上触发
trigger:'axis', // 鼠标只要在轴上就会触发
triggerOn:'click', // 触发方式 一般不用 click 简化用户操作
//formatter:`{a}（系列名称），{b}（类目值），{c}（数值）` 点击时的回调 可以是模板字符串 也可以是函数
formatter:function (arg) {
return arg[1].name + arg[1].data
}
},
toolbox:{// 工具栏。内置有导出图片，数据视图，动态类型切换，数据区域缩放，重置五个工具。
feature:{
saveAsImage: {},//导出图片
dataView: {},//数据视图
restore:{},//重置
dataZoom:{},//数据区域缩放
magicType: {//动态类型切换
type:['bar','line']
}
}
},
label:{ // 柱状图 内部 显示数值
show:true,
rotate:30,
},
legend: {//图例组件。图例组件展现了不同系列的标记(symbol)，颜色和名字。可以通过点击图例控制哪些系列不显示。
data: ['销量','热度']
},
xAxis: { // X Y 轴数据互换可以 变成横向柱状图
data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
},
yAxis: {
},
series: [// 核心设置 系列
{
name: '销量',
type: 'bar',
data: [157, 256, 789, 70, 450, 120],
markPoint:{ // 标注最大值和最小值
data:[
{
type:'max',name: '最大值'
},
{
type:'min',name: '最小值'
}
]
},
markLine:{ // 设置平均值
data:[
{
type:'average',name:'平均值'
}
]
}
},
{
name: '热度',
type: 'bar',
data: [257, 156, 489,170, 250, 180],
}
]
};