title中常用的设置
配置项--tooltip
编辑
配置项--legend
配置项--grid
title中常用的设置
title 标题组件，包含主标题和副标题。 以下是常用的对标题的设置
title:{//设置图表的标题
text:"主标题",
link:"baidu.com", //设置标题超链接
target:"self", //self为当前页打开超链接
backgroundColor:"red",//设置标题背景颜色
borderColor:"royalblue", //标题边框颜色
borderWidth:3, //设置边框粗细
x:"center", //设置标题位置居中
textStyle:{//设置主标题的文字风格
color:"yellow",//字体颜色
fontSize:30 //文字大小
},
subtext:"副标题", //设置副标题
sublink:"baidu.com", //设置副标题超链接
subtextStyle:{//设置副标题的文字风格
color:"black",//字体颜色
fontSize:20 //文字大小
}
}效果：
配置项--tooltip
提示框组件，用于配置鼠标滑过或点击图表时的显示框，添加属性之后将鼠标移入图表中将会弹出一个提示框
tooltip: {
}
tooltip:{
//触发类型
trigger:"item", //item默认为图形触发 还有axis坐标轴触发
//坐标轴指示器
azisPointer:{
type:"" //初始化默认是实线line，另外还可以添加shadow阴影效果、croos十字准星
},
//是否显示弹框（默认为true）showContent:true
//设置悬浮层的样式
backgroundColor:"pink", //设置背景颜色
borderColor:"red", //边框颜色
borderWidth:5, //弹框边框粗细
//设置文字样式
textStyle:{
color:"royalblue"
},
//自定义提示框信息
// formatter(par){
// }
}效果：
配置项--legend
图例组件展现了不同系列的标记，颜色和名字。可以通过点击图例控制哪些系列不显示。
legend:{
show:true, //设置图例开启或者关闭
}设置之后在页面图顶部出现一个图例
可以通过点击该图例来选择是否显示该颜色图例信息
legend:{
show:true, //设置图例开启或者关闭
//icon:"circle", //设置图例的形状circle为圆形
top:"10%", //设置图例位置
//设置图例宽高
itemWidth:10,
itemHeight:20,
//文字样式
textStyle:{
color:"red",//设置字体颜色
fontSize:15, //设置文字大小
backgroundColor:"pink", //文字背景
}
}效果：
全部代码：
<template>
<div ref="me" id="mydiv"></div>
</template>
<script>
import * as echarts from "echarts";
export default {
mounted(){
let mc = echarts.init(this.$refs.me) //实例化echarts
mc.setOption({
title:{
//设置图表的标题
text:"主标题",
link:"baidu.com", //设置标题超链接
target:"self", //self为当前页打开超链接
backgroundColor:"red",//设置标题背景颜色
borderColor:"royalblue", //标题边框颜色
borderWidth:3, //设置边框粗细
//x:"center", //设置标题位置居中
textStyle:{//设置主标题的文字风格
color:"yellow",//字体颜色
fontSize:30 //文字大小
},
subtext:"副标题", //设置副标题
sublink:"baidu.com", //设置副标题超链接
subtextStyle:{//设置副标题的文字风格
color:"black",//字体颜色
fontSize:20 //文字大小
}
},
tooltip:{
//触发类型
trigger:"item", //item默认为图形触发 还有axis坐标轴触发
//坐标轴指示器
azisPointer:{
type:"" //初始化默认是实线line，另外还可以添加shadow阴影效果、croos十字准星
},
//是否显示弹框（默认为true）showContent:true
//设置悬浮层的样式
backgroundColor:"pink", //设置背景颜色
borderColor:"red", //边框颜色
borderWidth:5, //弹框边框粗细
//设置文字样式
textStyle:{
color:"royalblue"
},
//自定义提示框信息
// formatter(par){
// }
},
legend:{
show:true, //设置图例开启或者关闭
//icon:"circle", //设置图例的形状circle为圆形
top:"10%", //设置图例位置
//设置图例宽高
itemWidth:10,
itemHeight:20,
//文字样式
textStyle:{
color:"red",//设置字体颜色
fontSize:15, //设置文字大小
backgroundColor:"pink", //文字背景
}
},
xAxis:{//x属性
data:["x1","x2","x3","x4"]
},
yAxis:{//y属性
},
series:{//系列
name:"数据展示",
type:"bar",
data:[
{"value":"100","d":"1"},
{"value":"120","d":"2"},
{"value":"150","d":"3"},
{"value":"80","d":"4"}
]
}
})
}
}
</script>
<style>
#mydiv{
width: 500;
height: 500px;
border: 1px royalblue;
}
</style>效果：
配置项--grid
grid:{
show:true, //对内容进行设置外层的边框
left:"20%", //图标容器距离内容容器的左位置拉大了20%
right:"20%",//图标容器距离内容容器的右位置拉大了20%
top:"20%", //容器与内容距离顶部拉大了20%
bottom:"20%", //容器与内容距离下方拉大了20%
backgroundColor:"pink", //设置填充颜色
borderColor:"yellow" //内容边框颜色设置
}
