创建一个图表容器，初始情况必须给这个图表一个宽高，如果这里没给，在下面获取容器的时候也可以给
<div id="myChart" :style="{height: '250px'}"></div>
获取div容器
myChart(参数) {
var myChart = this.$echarts.init(document.getElementById('myChart'))
如果初始没设置图表容器的大小，可以在这个进行设置
/*var myChart = echarts.init(document.getElementById('myChart'), null, {
width: 600,
height: 400
});*/
可以直接进行配置，也可以写一个Option，然后放在setOption进行设置
tooltip表示提示框组件
myChart.setOption({
tooltip: {
show: true,
backgroundColor: '#fff', //背景颜色
textStyle: { //文字样式
color: 'rgba(99, 107, 119, 1)',//字体颜色
fontSize: 12, //字体大小
lineHeight: 18 //行高
},
},
图例
图例的数据，一定要和series中的name保持一致，数据不一样的不会显示出来
通过top / right/ left / bottom 来控制图例的位置
在textStyle中设置文字大小、颜色、粗细、样式等
可以通过设置padding来控制图例的边距
legend: {
selectedMode: false,
data: ['成功量', '失败量'],
right: '0',
textStyle: {
fontSize: 12,
color: 'rgba(153, 153, 153, 1)'
}
// 设置内边距为 5
padding: 5
// 设置上下的内边距为 5，左右的内边距为 10
padding: [5, 10]
// 分别设置四个方向的内边距
padding: [
5, // 上
10, // 右
5, // 下
10, // 左
]
},
网格线
通过top / right/ left / bottom 来控制位置
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true, //表示刻度标签
backgroundColor : 'transparent',//设置背景颜色
borderColor : '#ccc' , //设置边框颜色
borderWidth : 1, //设置边框宽度
//也可以设置阴影
shadowBlur: number,
图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。
shadowColor: '',//阴影颜色。支持的格式同color。
shadowOffsetX:'',//阴影水平方向上的偏移距离
shadowOffsetY:'' //阴影垂直方向上的偏移距离。
},
x轴
xAxis: [
{
type: 'category',//数据类型
nameTextStyle: { //x轴的坐标名称字体样式设置
color: '#999999'//字体颜色
},
axisLine: { //x轴线设置
lineStyle: {
type: 'solid',
color: 'rgba(153, 153, 153, 1)' // x轴轴线颜色
}
},
data: dataX, //x轴坐标数据
axisTick: { //x轴点击事件
show: false
}
}
],
y轴
yAxis: [
{
type: 'value',
name: '调用量', //设置y轴名称
nameLocation: 'end',//设置名称位置
nameTextStyle: {//设置名称样式
padding: [10, 0, 0, -30]//给名称一个padding
},
min: 0,//设置y轴最小值
max: 200,//设置y轴最大值
splitNumber: 5,//设置y轴分为几份
axisLine: {//设置y轴轴线样式
lineStyle: {
type: 'solid',
color: 'rgba(153, 153, 153, 1)' // y轴轴线的颜色
}
},
}
],
柱状图设置
series: [
{
name: '成功量', //柱状图名称
type: 'bar',//设置图表类型为柱状图
barWidth : 20,//设置柱形宽度
stack: 'Total',//设置显示柱形
color: 'rgba(36, 157, 254, 1)',//设置柱形颜色
barGap: '-100%',//设置数据堆叠
data: successNums//设置柱形数据
},
{
name: '失败量',//同上
stack: 'Total',
barWidth : 20,
type: 'bar',
color: 'rgba(254, 176, 44, 1)',
data: errorNums
}
]
})
},
