vue上使⽤echarts并改变⽰例样式⽂章⽬录
⼀、安装和使⽤
1、下载安装
npm install echarts --save
2、引⼊
main.js
import*as echarts from'echarts';
Vue.prototype.$echarts = echarts
3、使⽤
注意：绘制echarts表的div必须设置宽⾼，不然会没有任何反应。
<template>
<div class="houseStates"ref="houseStates"></div>
</template>
<script>
export default{
name:"home",
mounted(){//挂载后绘制echarts图表
this.drawHouseStates();
},
methods:{
//绘制的⽅法
drawHouseStates(){
/
/基于准备好的dom，初始化echarts实例
var myChart =this.$echarts.init(this.$refs.houseStates);
var option={
//指定图表的配置项和数据
};
myChart.setOption(option);
//当界⾯宽⾼发⽣改变时重新加载echart图
};
}
}
</script>
<style scoped>
.houseStates{
width:400px;
height:400px;
}
</style>
⼆、修改样式
1、饼状图
1）添加牵引线
option={
series:[
{
label:{
show:true,//设置为false，关闭牵引线
normal :{
//饼形图显⽰格式，如：搜索引擎 33%
formatter :'{b|{b}}  {per|{d}%}  ',
rich :{
//设置字体样式
b :{
color :'black',//字体颜⾊
fontSize :14,
lineHeight :33
},
//设置百分⽐数字样式
per :{
color :'#00B4FB',
fontSize :14,
padding :[2,4],
borderRadius :2
}
}
}
},
//设置牵引线长度
labelLine:{
show:true,
length:35,
length2:10,
},
}]
}
2）设置环形图颜⾊
option ={
color :['#3AA1FF','#36CBCB','#4ECB73','#FBD437'] }
3）设置环形图间隙
{
itemStyle:{
borderWidth:3,
borderColor:'#fff'
}
}
]
}
4）设置环形图⼤⼩
option ={
series:[
{
//第⼀个数不能⼤于第⼆个数
radius:['20%','25%'],
}
]
}
5）设置legend的位置
option ={
legend:{
top:'5%',
left:'left',//距左边的距离
orient:'vertical'//垂直排列
},
};
6）设置默认选中（凸出）
注：放在setOption后⾯
//默认选中
myChart.dispatchAction({
type:'highlight',
seriesIndex:0,fontweight默认值
dataIndex:0
});
7）设置点击选中（凸出）
完成以下两个配置就可以实现点击凸出
option ={
series:[{
selectedMode:'single',//设置单选
data:[{value:1048, name:'拨测告警',selected:true},//设置⼀个默认选中{value:735, name:'设备告警'},
{value:580, name:'业务告警'},
{value:484, name:'性能告警'}]
}]
}
2、折线图
1）添加两个y轴
{//第⼀个y轴
},
{//第⼆个y轴
}],
}
2）将折线设置成平滑的曲线
option ={
series:[
{
smooth:true
}
]
};
3）设置区域渐变
option ={
series:[
{
areaStyle:{
color:new this.$aphic.LinearGradient(0,0,0,1,[{          offset:0,
color:'#A085EB'
},
{
offset:0.5,
color:'#BCA9F1'
},
{
offset:1,
color:'#F9F2F5'
}])
},
}
]
};
4）设置折线及折线点样式
option ={
series:[
{
symbol:"none",//去掉折线点
itemStyle:{
normal:{
color:'#FD6A30',// 折线点的颜⾊
lineStyle:{
color:'#FD6A30',// 折线的颜⾊
width:1,//折线宽度
type:'dotted'//设置线条为虚线
}
}
},
}
]
};
5）设置图的位置和⼤⼩
option ={
grid:{
left:'10px',//⽀持百分⽐，px
right:'10px',
bottom:'10px',
top:"10px",
containLabel:true,//包含了数值，防⽌溢出
},
}
注：如果不加containLabel属性，当y轴或x轴的刻度数太⼤时，可能出现以下溢出情况
containLabel属性说明：
6）设置y轴属性
注：y轴以下样式设置也适⽤于x轴的xAxis属性
a、隐藏y轴刻度
option ={
yAxis:[{
axisLabel:{
show:false,//false：隐藏，show：显⽰
}
}]
}
b、设置y轴轴线样式
option ={
yAxis:[{
axisLine:{
show:true,//显⽰和隐藏轴线
lineStyle:{//轴线样式设置
color:"rgba(235, 43, 43, 1)",
width:1,
type:"solid"
}
}
}]
}
c、设置y轴分割线样式

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。