关于ECharts 折线图和饼状图常用样式

关于ECharts常用修改样式的统计

关于统计图我们经常使用主要是折线图、柱状图、饼状图这三种。
先开始 肯定是建立一个空的统计图

var dom = document.getElementById(“id”);
var myChart = echarts.init(dom);
option = null;
option = {
    xAxis: {
        type: 'category',
        data: []
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        data: [],
        type: 'line'
    }]
};
 myChart.setOption(option, true);

折线图

折线、折线点、折线覆盖区域的样式

series : [
	        {
            name:'订单数',//这条线的名称，用于tooltip的显示，legend 的图例筛选
            type:'line',//统计图类型
            itemStyle: {  //折线拐点标志的样式
                normal: { 
                    color:depositData[0].Color,//单独设置legend的颜色  
                    ),  
                    borderColor:'rgba(48, 155, 255, 1)',  //拐点边框颜色
                    lineStyle: {        // 系列级个性化折线样式  
                        width: 3,  //折线宽度
                        type: 'solid',  //折线是实线还是虚线
                        color: "rgba(48, 155, 255, 1)" //折线颜色
                    }
                },  
                emphasis: {  //图形的高亮样式。
                    color: 'rgba(48, 155, 255, 1)',  
                }  
            },
            tooltip:{
            		borderColor:"rgba(11,21,38,1)",
            		padding:0,
            		backgroundColor:"rgba(11,21,38,1)",
            },
            symbolSize:6, //折线点的大小
            areaStyle: {normal: {//折线图覆盖区域的过度颜色
           		 color: new echarts.graphic.LinearGradient(0, 0, 0, 1,[{
                            offset: 0, color: 'rgba(48, 155, 255, 0.2)' // 0% 处的颜色
                        }, {
                            offset: 1, color: 'rgba(94, 203, 255, 0)' // 100% 处的颜色
                        }]
                    )}
              },
            data:orderAmount
	        }
	    ]

自定义提示框

  tooltip : {
	        trigger: 'axis',
	           axisPointer: {
	               type: 'line',
	           },
	            padding:0,//设置提示框边距
				position: function(point,params,dom){//设置提示框在鼠标的位置
					 point[0]=point[0]-150;
					 point[1]=point[1]-20;
					 return point
				}
	    },
		formatter: function (name) {//使用HTML自定义提示框，这个需要什么样式自己在CSS上写就行了， vue的话必须写在全局CSS上才生效
		    return '<div class="conters">\
						<p>'+name[0].name+'</p>\
						<p>订单量:'+name[0].value+'</p>\
					</div>' 
		},

y轴样式

 yAxis : [
	        {
	        type: 'value',
	        name:"城市订单",//Y轴名称
	         nameTextStyle:{
	            color:"rgba(57,58,74,0.5)", //名称字体颜色
	            fontSize:14,  
	            padding:20//名称字体边距
	        },
	         axisTick:{
	            show:false//是否显示坐标轴刻度，false是不显示
	        },
	        offset:10,//Y 轴相对于统计图的偏移
	       "axisLine":{       //y轴
	          "show":false
	       },
			splitLine:{//坐标轴在 grid 区域中的分隔线
			    show:true,//true显示
			    lineStyle:{
			        color:"rgba(233, 233, 233, 1)",//线条颜色
			        type:'dashed'//线条类型，dashed是虚线
			
			    }
			
			}
	    }
	    ],

X轴样式

 xAxis : [
	      {
	        type: 'category',//类型
	         data : [],//数据
	        axisTick:{
	            show:false//是否显示坐标轴刻度，false是不显示
	        },
	        offset:10,//X 轴相对于统计图的偏移
	        boundaryGap: true,//坐标轴两边是否留白
	        axisLabel:{
	        	color:"rgba(57, 58, 74, 1)"//刻度标签文字的颜色
	        },
	         axisLine:{  
                lineStyle:{  
                    color:'rgba(233, 233, 233, 1)'//X轴颜色
                }  
	           },
	    	}
	    ],

饼状图

设置圆的样式

 series :{
          name:'time',
          type:'pie',
          hoverAnimation:false,//是否开启 hover 在扇区上的放大动画效果。
          radius :[68, 90],//饼图的半径，实心圆可以改为[0,90]
          center : ['25%', '57%'],//饼图的中心（圆心）坐标，
          label: {
            normal: {
				show: false,//是否在圆内显示所有分类的名称
				position: 'center',
				color: 'rgba(57, 58, 75, 1)',
				fontSize: 24,
				fontWeight: 'bold',
            },
            emphasis: {
              show: false, //是否在hover某个分类的时候显示该分类在圆内
            }
          },
       
          data:[],
          itemStyle: {
            normal:{
              color:function(params) {/定义圆分类的颜色
                //自定义颜色
                var colorList = [
	                  '#309BFF', '#D9D9D9', 'rgba(250, 204, 20, 1)', 'rgba(217,217,217,1)', '#0025CE', '#5704FF'
	                ];
                return colorList[params.dataIndex]
              }
            }
          }
        }

自定义分类数据

  legend: {
            orient: 'vertical',
            icon: "circle",//图标类型
            itemWidth: 7,  // 图标设置宽度
            itemHeight: 7, // 图标设置高度
            itemGap: 26,//间距
            right:36,
            top:100,
            bottom: 20,
            textStyle:{//文字的样式。
              color:"#5E6D84",
              fontSize:14,
              padding: [0, 0, 0, 5]
            },
            data:[],//数组
            formatter: function (name) {//根据需求自定义内容
                 var textConter="";
            	data.forEach(function(item){
            		console.log(item)
            		 if(item.name==name){
			    		textConter=item.name+" " +' | '+" " +item.rate+'% '+" "+item.value;
            		 }
            	})
            	return textConter

			}
          },

第一次发博客就到这，最后加一条echarts官网文档搜索链接echarts文档