Echart的一些配置说明

Echart在画图表经常使用的一些配置项

X轴Y轴及部分配置

tooltip: {//图表hover提示
	trigger: 'item',//axis
    formatter: "{a} <br/>{b} : {c}次 ({d}%)"
},
legend: {//小图例显示
		show:false,//显示与否
          data: ["警员1", "警员2", "警员3"],//
          // orient: "vertical",
          right: "30px",
          y: "30px",
          textStyle: {
            color: "#b8b8b8" // 图例文字的颜色
          }
        },
color: ["#ff2d55", "#8ffa87", "#00c2ff"],//柱状图曲线扇形等颜色配置
xAxis: [
          {
            type: "category",
            axisLabel: {
              // formatter: "{value}",
              textStyle: {
                color: "#b8b8b8" //X坐标的字体颜色
              }
              axisLabel:{//这个语句的意思是，设置横坐标的文字全部显示，不间隔
              	interval:0
              }，
            },
            axisLine:{
				show：false, //隐藏X坐标轴
				lineStyle:{
					color:'#00eeff',  //X坐标轴的颜色
				},
			},
            boundaryGap: false,
            data: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"]
          }
        ],
yAxis: [
	{
		splitLine:{
			show:false,  //去掉背景的网格线
	    },
	    show:false,  //隐藏坐标轴及刻度
		axisLabel: {
			textStyle:{
				color:'#7edae8',  //坐标的字体颜色
			},
		},
		axisLine:{
			show：false, //隐藏Y坐标轴
			lineStyle:{
				color:'#00eeff',  //Y坐标轴的颜色
			},
		},
		axisTick:{
			show:false, //隐藏坐标轴的刻度
			},
		},
],
series: {
          name: "日用电量",
          type: "bar", //不同类型的图，值不一样
          smooth: true,
          barWidth: 50,
          data: data, //也是后台数据传来 ["-0.16", "0.14"]
          areaStyle: { //背景区域
            normal: {
              color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                offset: 0,
                color: 'rgba(60,177,228,0.5)'
              },
                {
                  offset: 1,
                  color: 'rgba(57,102,177,0.1)'
                }
              ], false),
            }
          },
          itemStyle: {
            normal: {
              //每个柱子的颜色即为colorList数组里的每一项,如果柱子数目多于colorList的长度，则柱子颜色循环使用该数组
              color: function(params) {
                //我这边就两个柱子，大体就两个柱子颜色渐变，所以数组只有两个值，多个颜色就多个值
                var colorList = [
                  ["#0679e3", "#3d97ed", "#90c1fc"],

                  ["#07b8d9", "#62c4db", "#86e9fc"]
                ];

                var index = params.dataIndex;
                if (params.dataIndex >= colorList.length) {
                  index = params.dataIndex - colorList.length;
                }

                return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  { offset: 0, color: colorList[index][0] },
                  { offset: 0.5, color: colorList[index][1] },
                  { offset: 1, color: colorList[index][2] }
                ]);
              },
              barBorderRadius: 5 //柱状角成椭圆形
            }
          }
        },
        label: {
          //标签，柱状图显示的文字
          normal: {
            show: true, //默认为不显示
            position: "top", //默认显示在内部，当为0时，影响视觉
            formatter: "{c}(kwh)" //文字显示的格式
          }
        },
        textStyle: {
          //显示文字的样式
          color: function(params) {
            var colorList = ["#0679e3", "#07b8d9"]; //每个柱子上的字体颜色不一样
            return colorList[params.dataIndex];
          },
          fontWeight: 300,
          fontSize: 16 //文字的字体大小
        },
        grid: {
          //柱状图与容器之间的位置分布
          left: "20%",
          right: "20%",
          bottom: "8%",
          containLabel: true
        }

 tooltip: {
          trigger: 'axis',
          axisPointer: { // 坐标轴指示器，坐标轴触发有效
            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        legend: {//3标记位置
          // orient: 'vertical',
          left: 'right',
          top: 'top',
          data: nameList
        },
        grid: {//容器与位置
          top:'10%',
          left: '3%',
          right: '4%',
          bottom: '4%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          data: data.time //x轴时间标记
        },
        yAxis: {
          type: 'value',
           axisLabel:{formatter:'{value} %'},//坐标轴带单位
           name:"通行次数(次)"//坐标轴标题
        },
        series:[
        {
            name: item.openTypeName,
            type: 'bar',
            stack: '总量',
            barWidth: 35,//柱形宽度大小
            itemStyle:{normal:{color:colorList[index]}},//柱颜色
            label: {
              normal: {
                show: false,
                position: 'insideRight',//柱形内文字
                formatter:function(val){   //对文字进行处理可用函数，让series 中的文字进行换行，
                //函数返回一个字符串
                console.log(val)
                //val 是个对象 ，属性percent百分比、name名称、value值
                 return val.name.split("-").join("\n");
               }
              },
            },

            data:item.countTime//每个的数据数组
          }]

tooltip: {
	//提示框组件。
    trigger: 'axis',
    axisPointer: {
       type: 'none'
    },
    //背景色
   extraCssText: 'background-color:#fff;color:#7B7B7B;padding:10px 15px;box-shadow:0px 2px 10px 0px rgba(0,0,0,0.1);',
   //显示格式
   formatter(params) {
   let {name, seriesName, value, unit = ''} = params[0] || {};
   return `${params[0].name}月份<br />${params[0].seriesName}:&nbsp;${formatter(params[0].value)}&nbsp;万元<br />${params[1].seriesName}:&nbsp;${formatter(params[1].value)}&nbsp;万元`;
   }
},

series: [{
       data: [120, 200, 150, 80],
       type: 'bar',
       barCategoryGap:'80%',  //调整柱子宽度
       itemStyle: {
           color: '#62A1A9'  //设置柱子颜色
       },                
       emphasis: {
           itemStyle: {
             color: '#2F4654',   //hover时改变柱子颜色
             // shadowColor: 'rgba(102,102,102,0.50)',
             // shadowOffsetX: 0,
             // shadowOffsetY: 2,
             // shadowBlur: 6,
             borderWidth: 4,
             borderColor: '#2F4654',
             borderType: 'solid'
          }
    }]