vue上使用echarts并改变示例样式

一、安装和使用

1、下载安装

echart官网：https://echarts.apache.org/zh/index.html

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图
	        	 window.onresize = function () {
       				 myChart.resize();       
     			 };
	        }
	}
</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）设置环形图间隙

option = {
	series: [
	   { 
	   	   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,
    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轴

option = {
	 yAxis: [
	 {     //第一个y轴
	 }, 
	 {      //第二个y轴
	 }], 
}

2）将折线设置成平滑的曲线

option = {
	series:[
		{
			smooth: true
		}
	]
};

3）设置区域渐变

option = {
	series:[
		{
			areaStyle: {
			   color: new this.$echarts.graphic.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轴分割线样式

option = {
	yAxis:[{
	    splitLine: {
	      show: true,   //显示和隐藏分割线
	      lineStyle: {  
	        color: "rgba(241, 41, 41, 1)",  //设置颜色
	        width: 1.5,    //设置分割线粗细
	        type: "dashed",  //分割线类型，'solid'，'dashed'，'dotted'
	      }
	    }
  }],
}

d、隐藏y轴刻度线

option = {
	yAxis:[{
		axisTick: {
	      show: false
	    }
	}]  
}

7）x轴文字切斜

option = {
	xAxis:[{
		axisLabel: {
	      interval: 0,  //0：全部显示
	      rotate: 40,  //文字切斜角度，逆时针方向
	    }
	}]  
}

3、仪表盘

1）仪表盘轴线背景颜色及进度条颜色

option = {
  series: [
    {
      progress: {  //展示当前进度
        show: true,
        itemStyle: {
          color: "red"   //进度条颜色
        }
      },
      axisLine: {
        lineStyle: {
          width: 8,  //轴线宽度
          color: [       //轴线背景颜色
            [1, '#f3f4fa']
          ]
        }
      },
      
    }
  ]
};

效果如图：

2）仪表盘大小刻度样式设置

option = {
  series: [
    {
      axisTick: { //小刻度
        show: true,
        length: 5,         //长度
        distance: 3,  //距轴线的距离
        lineStyle: {
          color: 'red',  //颜色
          width: 1,         //宽度
        }
      },
      splitLine: {  //大刻度
        distance: 3,
        length: 10,
        lineStyle: {
          color: 'blue',
          width: 3
        }
      },
    }
  ]
}

效果如图：

3）仪表盘指针

option = {
  series: [
    {
      pointer: { //指针
        width: 3,  //指针宽
        length: '45%',  //指针长
        itemStyle: {
          color: 'red'  //指针颜色
        }
      },
    }
  ]
}

4）仪表盘半径、角度及最大最小刻度值

option = {
  tooltip: {
    formatter: '{a} <br/>{b} : {c}%'
  },
  series: [
    {
      radius: '60%',  //半径
      endAngle: 0,   //开始角度
      startAngle: 270,  //结束角度
      min: 0,   //最小刻度值
      max: 200,  //最大刻度值
      splitNumber: 5,  //分割成5个大刻度
    }
  ]
}

效果如图：

5）仪表盘值的样式设置

option = {
  series: [
    {
      detail: {  
        formatter: '{value}%',
        color: '#333333',
        fontSize: 16
      },
    }
  ]
}

6）仪表盘刻度数

option = {
  series: [
    {
       //刻度数
      axisLabel: {  
        distance: 13,  //距轴线的距离
        color: 'red',
        fontSize: 12
      },
    }
  ]
}

效果如图：

7）不同阶段的仪表盘

option = {
  title: {
    text: '上传速率',
    textStyle: {
      fontSize: 16,
      color: '#797979',
      fontWeight: 400
    },
    left: 'center',
    bottom: '100px'
  },
  series: [
    {
      name: 'Pressure',
      type: 'gauge',
      min: 0,
      max: 240,
      radius: '60%',
      axisLine: {
        lineStyle: {
          width: 8,
          color: [   //设置不同阶段的颜色，注：设置颜色不同的阶段仪表盘内不能设置progress(进度条)属性
            [0.3, '#228b22'],
            [0.7, '#0099ff'],
            [1, '#ff0000']
          ]
        }
      },
      axisTick: {
        //小刻度
        show: true,
        length: 5,
        distance: 3,
        lineStyle: {
          color: 'auto',  //颜色自适应
          width: 1
        }
      },
      splitLine: {
        //大刻度
        distance: 3,
        length: 10,
        lineStyle: {
          color: 'auto',   //颜色自适应
          width: 1
        }
      },
      detail: {
        formatter: '{value}kb/s',
        color: '#333333',
        fontSize: 16
      },
      pointer: {
        //指针
        width: 3,
        length: '45%',
        itemStyle: {
          color: 'auto'  //颜色自适应
        }
      },
      axisLabel: {
        //刻度数
        distance: 13,
        color: '#00a6ff',
        fontSize: 12
      },
      data: [
        {
          value: 34
        }
      ]
    }
  ]
}

效果如图：

4、通用设置

1）设置图例样式

legend: {
    icon: "circle",   //图例形状，circle:圆点，rect：方形，diamond：菱形,none:不显示
    itemStyle: {
      color: "rgba(222, 44, 44, 1)" //图例颜色
    },
    itemWidth: 14,       //图例宽
    itemHeight: 14        //图例高
  },

效果如图：

2）点击显示数据

option = {
  tooltip: {
    triggerOn: "click", 	// mousemove:鼠标移动时触发，click:鼠标点击时触发    
  },
}

3）设置x，y轴字体样式

下列是设置y轴字体样式，x轴同理。找到xAxis，并设置axisLabel即可。

option = {
  yAxis: [{
    axisLabel: {
      color: "rgba(242, 38, 38, 1)",     //颜色
      fontStyle: "italic",   //字体的风格
      fontWeight: "bold",    //字体粗细
      fontFamily: "sans-serif",    //字体系列
      fontSize: 13,     //字体大小
    }
  }],
}

4）去掉下载图标

option = {
	toolbox:{
        show:false
    },
}

4）显示数据在折线上或柱形图上

option = {
	series: [{
	    label: {
	      show: true,
	      position: "top", //top,inside,insideTop,outside等
	       //样式设置
	      color: "rgba(239, 31, 31, 1)", 
	      fontSize: 14,
	      fontWeight: "bold"
	    }
  }]
}