echart进阶

针对之前写的博文，我再做进一步的更新。如果需要基础版本，点击 关于echart的简单理解
这几天的工作都是跟echart打交道。可以说对echart有一些简单的基本认识了。不多说，来点干货吧。
1、如果数据差距很大的话，会出来一种现像。那就是数据小的柱子很小很小，而数据大的，就会出现很大很大。这样看起来很不美观。就如下图这样子

不用说，你们也会说这样很难看了。那么，有没有更好的办法呢？其实，我们只需要改一下它的配置就可以了。

对，就是那么简单，只需要把这个值改下就可以了。

yAxis: [
     {
		type: 'log',
		min:10,
		// min 是最小的值
		//max:20,
		// max 是最大的值
		splitNumber:10,
		// splitNumber 可以理解为中间多少个标签
      	min:'dataMin', //取最小值为最小刻度 （这个属值是固定写法）
		max: 'dataMax', //取最大值为最大刻度（这个属值是固定写法）
      },
],

而这代码的意思是把值转换成数学中的对数来统计。对数是啥？其实，我也不知道，没上过高中，不知道是啥子。
然而，修改这个配置也是需要一定的基础的。那就是，数据中不能有零存在。那么，如果有零，我们只能把零从重赋值为undefined就可以了。不然，会出现所有的柱都“一气冲天”全都顶到天上去了。

2、那么，问题来了，如果有些时候，需要自定义一些配置。其实，这些属性都是通用的。

legend: {//这个是图例
	show: true,
	right: '3%',
	orient: "vertical",//默认是横排，vertical是竖向排列的意思，如果想模向排列，这个属性可以不用设置
	icon: "circle",
	itemWidth: 8, // 设置宽度
	itemHeight: 8, // 设置高度
},
tooltip: {//定义鼠标点击柱子时显示的小框框
   trigger: 'axis',
   axisPointer: {
       type: 'shadow'
   },
   triggerOn: "click",//这个是点击的意思，也可以是其他的，比如说 mouseover 等等
   show: true, //注意这个，如果不写这个属性，你就会发现，你点击柱子的时候，它会触发两次
   formatter: (e) => {//回调函数，就是有几个分类就有几个数组元素，每个元素是一个json对象
       let icon1 = e[0]['marker'];//图标小点
       let icon2 = e[1]['marker'];
       let seriesName1 = e[0]['seriesName'];
       let seriesName2 = e[1]['seriesName']

       let title = e[0]['axisValue'];
       let index = e[0]['dataIndex'];
       let data = e[0]['value'] 
       let valdata = e[1]['axisValue']; 
       let str = `<div>
                       <div style="margin-bottom:10px;">${icon1 + seriesName1}<span style="float:right; margin-left:30px;">${YiSuanYuSuanRuZhangShu[index]}</span></div>
                       <div>${icon2 + seriesName2}<span style="float:right;  margin-left:30px;">${BenNianLeiJiWanChengShu[index]}</span></div>
                   </div>`
       return str;//最后记得一定要返回出去
   }
},

3、如果需要修改柱子的颜色和柱子里的字体颜色

{
     name: '本年累计完成数',
     type: 'bar',
     barGap:'60%',//柱子的距离（这儿指的是多个分类中的柱子距离）
     //label: labelOption,
     emphasis: {
         focus: 'series'
     },
     data: BenNianLeiJiWanChengShu,
     label: {
         normal: {
             show: true,
             textStyle: {//这儿设置字体的样式，比如字体大小，字体颜色等等
                 //	我们可以这样写
                 //fontSize:12,
                 //color:'#ff2f'
             },
             position: 'top',//可选 left right top bottom ....
             verticalAlign: 'middle',
             align: 'center',
             //rotate: 90,//这个是设置是否是正常放置还是旋转90度放置
             formatter: (parms) => {//重新定义在柱子中显示的内容
                 return BenNianLeiJiWanChengShu[parms.dataIndex]
             }
         },
     },
     itemStyle: {
         normal: {
             color: '#078cd0'//柱子的颜色
         }
     }
 },

4、常用属性配置

//图例
legend: {
       orient: 'vertical', //展示方向  vertical为坚向  horizontal为模向
       type:'category',    // 'plain'：普通图例。缺省就是普通图例; 'scroll'：可滚动翻页的图例。当图例数量较多时可以使用
       x:'center', //水平的安方位置  可选值  left center right
       y:'top', //坚向的安方位置  可选值 top center bottom
       backgroundColor: '#fac858',
       borderColor: '#5470c6', 
       borderWidth: '200', //图例的边框线，默认为 0
   }

4.1饼图中的牵引线设置、屏图圆圈中间的文字

let color = ['#668EFD' , '#FB8071' , '#FFAB6F' , '#A886F6' , '#49DFDE']
let rich = {
    d:{
        color:'#668EFD',
        fontSize:'12px',
    },
    a:{
        color:'#FB8071',
        fontSize:'12px',
    },
    b:{
        color:'#FFAB6F',
        fontSize:'12px',
    },
    c:{
        color:'#A886F6',
        fontSize:'12px',
    },
    g:{
        color:'#49DFDE',
        fontSize:'12px',
    },
    top:{
        color:'#ffffff',
        fontSize:'12px',
    },
}
let colorRich = ['d' ,'a' ,'b' , 'c' , 'g'] //这儿的数组就是对应rich对象的键


data = [
    {name:'油费' , value: ((25.22/55.761274)*100).toFixed(2) },
    {name:'保险费用' , value:((1.017674/55.761274)*100).toFixed(2)},
    {name:'过路费' , value:((10.7281/55.761274)*100).toFixed(2)},
    {name:'维修费' , value:((10.668/55.761274)*100).toFixed(2)},
    {name:'其他费用' , value:((8.1275/55.761274)*100).toFixed(2)},
]


var options = {
    color:color,
    graphic: [ //环形图中间添加文字 有几行就有几个json对象
        { //环形图中间添加文字
            type: 'text', //通过不同top值可以设置上下显示
            left:'center',
            //left: '44%',
            top: '45%', //也可以是字符串数值
            style: {
                text:'入库量',
                textAlign: 'center',
                fill: '#ffffff', //文字的颜色
                fontSize: 24,
            }
        },
        { //环形图中间添加文字
            type: 'text', //通过不同top值可以设置上下显示
            left: 'center',
            top: '53%', //也可以是字符串数值
            style: {
                text: '分类',
                textAlign: 'center',
                fill: '#ffffff', //文字的颜色
                fontSize: 24,
            }
        }
    ],
    legend: { //图例设置
        show:true,
        icon: "circle", //图例形状 （circle:圆  , rect:矩形 , roundRect: 圆角矩形 , triangle: 三角形 , diamond:菱形 , pin:大头针、徽章 , arrow:箭头  , none:无）
        orient: 'vertical', // vertical 为竖向 ，想要横排，可以不设置
        // 图例位置
        //x:'center',
        left: '0',
        bottom: '0',
        itemWidth: 10, // 图例的宽高
        itemHeight: 10, //图例的宽高
        itemStyle: {
            borderWidth: 0,
        },
        /*  字体样式  */
        textStyle: {
            color: '#fff'
        }
    },
    tooltip: { //鼠标移入到图中显示的信息 , 其实这儿如果不写，只是一个空的对象放着 tooltip:{}  也是一样可以实现提示的，只是没有那么详细
        formatter: function (params) {
            //console.log(params)
            let str = `<p>
                            <span>${params.marker}</span>
                            <span>${params.name} : ${params.value} 万元</span>
                        </p>`
            return str
            //console.log(params.name , params.value)
        }
    },
    series: [{
        /* 样式 */
        itemStyle: {
            //borderWidth: 0,
            //borderColor: '#fff'
        },
        /*  图表名称  */
        name: '',
        /*  类型  */
        type: 'pie',
        center:['60%' , '50%'], //位置 也可以是数值（字符串类型）
        radius: ['40%', '80%'],/*  圆 大小  内环圆  外圆  也可以是数值（字符串类型） */ 
        /*  数据  */
        data: data, //数据最好就是name value
        /*  指引线 */
        labelLine: {
            show: true,
            normal: {
                length: 5,//第一条线的长度
                length2: 20, //第二条线的长度
                lineStyle: {
                    color: '#ffffff'
                }
            }
        },
        /*  牵引线中的文字提示 */
        label: {
            color:'#ffffff',
            formatter:(e)=>{
                //这儿需要注意一下，top 也就是在上面 rich对象中的top健
                return `{top|${e.name}} \n {${colorRich[e.dataIndex]}|${e.value} %}`
            },
            lineHeight:'20',
            rich:rich, //rich等于上面定义的rich的对象
        },
    }]
}

4.2平滑曲线（折线）和阴影

let d = '后端返回的数据，大数组，里面的元素就是一个一个的json对象 我们只需要关注 展示在x轴和y轴的数据 ）';
let RiQi = []; //X轴上 时间
let HeJi = []; //Y轴上 数值
d.forEach(item=>{
    RiQi.push(item.RiQi)
    let num = ((item.HeJi) / 10000).toFixed(2)
    HeJi.push(num)
})

let options = {
    grid: {//位置（整个图在 div中的位置） //支持 top right bottom left
        bottom: '0%',
        left:0,
        right:0,
        containLabel: true
    },
    title: [//标题 不用多说，可以多个，多个的时候用一个数组包起来，
        {
            show:true,
            textStyle: {
                fontWeight: 'normal',      
                color: '#ffffff',
                fontSize:'12'
            },
            top:0,
            left:0,
            //right:'',
            text: '万元',
        },
        {
            show:false,
            textStyle: {
                fontWeight: 'normal',      
                color: '#ffffff',
                fontSize:'12'
            },
            left:100,
            top:0,
            //right:'',
            //text: '（万元）',
        }
    ],
    tooltip: {//跟饼图一样，是提示用的
        formatter: function (params) {
            let str = `<p>
                            <span>${params.marker}</span>
                            <span>${params.name} : ${params.value} 万元</span>
                        </p>`
            return str
        }
    },
    legend: {//图例，不多说，上面介绍过
        show:false,
        //data:['销量'],
        textStyle: {
            fontWeight: 'normal',      
            color: '#fff'
        },
    },
    xAxis: {
        data: RiQi,
        axisLabel: {//x轴文字的配置
            show: true,
            textStyle: {
                color: "#ffffff",
                fontSize:'14'
            }
        },
        show:true,
        axisLine:{
            show:true,
        },
        axisTick:{
            show:true,
        },
        splitLine:{
            show:false // 不显示网格线
        },
    },
    yAxis: {
        //type: "value",
        //name: "（辆）",//name的做用就是在Y轴上显示的单位
        nameTextStyle: {
            padding:[0,0,0,150], //y轴的位置
            color: "#ffffff",
            fontSize:'14',
            nameLocation: "start",
        },
        axisLabel: {//x轴文字的配置
            show: true,
            textStyle: {
                color: "#ffffff",
                fontSize:'14'
            }
        },
        show:true,
        axisLine:{
            show:true,
        },
        axisTick:{
            show:true,
        },
        splitLine:{
            show:false // 不显示网格线
        },
    },
    series: [
        {
            //name: '客车', 这儿的name值的意是 如果 tooltip 只是一个空对象的时候，它会带上这个name的内容
            type: 'line',
            data: HeJi,
            color:'#FA8070',
            //symbol: 'none', //折线上的空心圆点 不显示 (打开注释就表示线条没有小圆点)
            smooth: true, //写上true表示线条是平滑的
            tooltip:{
                trigger:'item'
            },
            tooltip:{
                trigger:'item'
            },
            itemStyle:{
                normal:{
                    label : {
                        color:'#ffffff',
                        show: true // 在折线拐点上显示数据
                    },
                    lineStyle:{          
                        //width:3,  // 设置虚线宽度
                        //type:'dotted'  // 虚线'dotted' 实线'solid'
                    }
                }
            },
            areaStyle: {
                color: { //设置折线的阴影
                    type: 'linear',
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [{
                        offset: 0, color: '#5E334C' // 0% 处的颜色
                    }, {
                        offset: 1, color: '#000338' // 100% 处的颜色
                    }],
                    global: false
                }
            }, 
        },
    ]
}