Echarts使用（vue）

Echarts常用配置项
1.配置项解读（整体）

option = {
  //标题：包括主标题和副标题
  title:{},
  //图例设置
  legend: {},
  //提示内容：可定制内容和样式
  tooltip: {},
  //系列数据:可以包含不同类目的数据集合，每个数据集合可以设置数据标题、tooltip、展示方式（如柱状、折线等）
  series:[{name:'',data:'',tooltip:'',type:''},{},{}]
 
  //声明一个类目轴：x轴（可定义type类型，label轴标题）
  xAxis: { type: 'category' },
  //声明数值轴：y轴
  yAxis: {},
  //系列
  series: [{ type: 'bar' }, { type: 'bar' }, { type: 'bar' }]
};

2.常规配置项完善

//案例一：主要列举xAixs（x轴）和yAxis（y轴）以及series配置（系列：即图表展示的数据组，可以有多组数据以展示为混合图表）
var option = {
        title: {},
        tooltip: {},
        grid: {
          x: 30,
          y: 35,
          x2: 20,
          y2: 30,
          borderWidth: 1,
        },
        xAxis: {
          axisTick: {
            show: false,
          },
          axisLabel: {
            textStyle: {
              show: true,
              color: "#bbb",
              fontSize: "14",
            },
          },
          data: xData,
          axisLabel: {
            show: true,
            interval: 0, //使x轴上的文字显示完全,
            formatter: function (params) {
              var newParamsName = "";
              var paramsNameNumber = params.length;
              var provideNumber = 4;
              var rowNumber = Math.ceil(paramsNameNumber / provideNumber);
              if (paramsNameNumber > provideNumber) {
                for (var p = 0; p < rowNumber; p++) {
                  var tempStr = "";
                  var start = p * provideNumber;
                  var end = start + provideNumber;
                  if (p == rowNumber - 1) {
                    tempStr = params.substring(start, paramsNameNumber);
                  } else {
                    tempStr = params.substring(start, end) + "\n";
                  }
                  newParamsName += tempStr;
                }
              } else {
                newParamsName = params;
              }
              return newParamsName;
            },
          },
          // splitLine: {
          //   show: false
          // }
        },
        yAxis: {
          axisTick: {
            show: false,
          },
          axisLine: {
            show: true,
            // lineStyle:{
            //   color:'#ccc'
            // }
          },
          axisLabel: {
            textStyle: {
              show: true,
              color: "#333",
              fontSize: "12",
            },
          },
        },
        series: [
          {
            type: "bar",
            data: yData,
            barWidth: 35, //柱图宽度
            itemStyle: {
              //上方显示数值
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  { offset: 0, color: '#2867FA' },
                  // { offset: 0.5, color: '#188df0' },
                  { offset: 1, color: '#4AA1FC' }
                ]),
                label: {
                  show: true,
                  position: 'top',
                  textStyle:{
                    color:'#4AA1FC'
                  }
                },
              },
            },
          },
        ],
      };


//案例二：主要列举xAixs（x轴）和yAxis（y轴）以及series配置（系列：即图表展示的数据组，可以有多组数据以展示为混合图表）
var option = {
	title:{},
	tooltip:{},
	grid:{
	},
	//x轴配置常规包括：是否显示分割/x轴上文字配置/x轴数据
	xAxis:{
		axiosTick:{
			show:false
		},
		axiosLabel:{
			show:true,
			interval:0,
			formatter:function(params){
				return someting...
			},
			textStyle:{
				show:true,
				color:xxx,
				fontSize:xxx,
			}
		},
		data:this.xData,
	},
	//y轴常规配置包括：除了和x轴相同的配置以外，y轴默认时不显示竖线条的，需要设置axisLine;另外y轴数据（作为值轴时）通过series配置
	//另外还有一个分隔线属性splitLine，由于配置显示的横向网格线是虚线还是实线
	yAxis:{
		axisLine:{
			show:true,
		},
		......
		......
		......
		splitLine :{
          lineStyle:{
              type:'dashed'//虚线
          },
          show: true //是否显示
        }
		//无data配置
	},
	//系列配置及值显示配置，可以设置某个系列值的显示类型：bar/line/等，配置该系列值的值块是否有数字进行标注显示
	//itemStyle是指你可以对每一项（即柱状图的柱子，折线图的线条，饼图的区域块）进行样式配置，下边的normal指的是正常情况下样式配置，对应的有个emphesis，就是鼠标移到该项时（即强调）的样式配置,empesis正常情况可以不写，除非想定制
	series:[
		{type:"bar",data:this.yData,barWidth:35,
			itemStyle:{
				//每个item项上方显示数值（使用bar/饼图/折线图情况）
				normal:{
					color:[],
					label:{show:true, positon:'top',textStyle:{color:'black'}}
				},
				//emphsis:{}
			}
		},
	]
}

3.配置项解读

//grid属性用于配置图表距离容器左/上/右/下的边距间隔，可以实现图表位置和大小的调整，也可以进行网格线的样式配置
 grid: {
   x: 130,
   y: 35,
   x2: 20,
   y2: 30,
   borderWidth: 1,
 },
 //图例属性legend：可以配置位置，排列方式：水平/垂直，图例图形宽高/颜色，图例文字通过formatter进行定制，图例溢出滚动显示
 legend:{
 	orient:'verticail',
 	x:"right",
 	y:"center",
 	itemHeight: 12,
    itemWidth:12,
    type: 'scroll',
    itemGap: 2,
    //回调自定义显示每个图例的文字内容
    formatter:(name)=>{
       let data = option.series[0].data;
        console.log(data);
        let total =0;
        let tarValue;
        for(let i=0;i<data.length;i++){
          total+=data[i].value
          if(data[i].name == name){
            tarValue = data[i].value;
          }
        }
        // let v = tarValue
        let p =Math.round((tarValue/total)*100)
        return ` ${name}:${p}%`
    }
 },
 //标题配置：可配主标题/副标题的文本，位置，文本样式，主副标题间隔
 title:{
 	show:true,
 	text:'xxx',
 	left:'center',
 	top:'center',
 	textStyle:{
 		color:'black',
 	},
 	itemGap: 2,
 	
 },

title常规配置

 title:{
   	  text: "组标题",
   	  subtext:"副标题",
   	  itemGap:10,
      top:'15%',
      left: '55%',
      textStyle: {
        fontSize: 14,
        align: "left",
        color: "#1b83cb",
      },
      subtextStyle:{
      },
      textAlign:"center",
      //borderColor: '',     // 标题边框颜色
  	  //borderWidth: 1,    // 边框宽度（默认单位px）
},

legend图例常规配置

legend: {
	orient:"vertical",
   	left: '10%',  //图例距离左的距离，用 x: 替换也可
   	top: 'center',  //图例上下居中，用 y: 替换也可
   	itemHeight:10,
   	itemWidth:10,
   	textStyle:{
   		font-size:10,
   	}
	type:"scroll",
	formatter:()=>{}  
 },

常规需求

1.echarts图表自适应解决方法：

//初始化图表实例
const chartDom = document.getElementById('myChart');
let myChart = echarts.init(chartDom);
// 方法一：监听窗口大小变化事件，若dom尺寸变化，则resize
const chartObserver = new ResizeObserver(() => {
    myChart.resize();
});
chartObserver.observe(chartDom);

//方法二：窗口变化的钩子中调用resize方法
window.onresize = () => {
    myChart.resize();
}

2.x轴上文字过长显示不全的解决方法（设置文字显示倾斜）

//使用xAxis属性axisLabel设置倾斜,interval用于设置x轴上每个类目的间隔，rotate倾斜角度
axisLabel: {
	interval:0,
	rotate:40 
}

3.监听某个轴或者点的点击事件
4.自定义tooltip或者legend、自定义图表的图形

let options = {
    tooltip: {
        formatter: function (params) {
            return params.marker + params.name + ': ' + (params.value[3]) + ' 小时' ;
        }
    },
}

5.多条x轴/y轴，折线与柱状图混合等

小结：
轴线通过（axisLine/splitLine）通过属性lineStyle设置
文字通过textStyle
图例/系列通过itemStyle
itemGap用于图例，标题，

6.关于dataset数据集的理解

（1）dataset数据集的存在是为了将图表的数据与属性配置部分剥离开来，方便数据的复用，通过映射的方式实现将数据项映射到对应系列中。
（2）dimension维度可以直接通过dimension指定声明，也可以将source节点的第一行作为维度声明
（3）一个完整的系列被认为是一个维度，维度内的每一项被称为数据项

7.Echart中tooltip等选项的文字显示换行语法模板

label: {
  formatter: function(value) {
    let str = ''
    const num = 6// 每行显示字数
    const valLength = value.length// 该项x轴字数
    const rowNum = Math.ceil(valLength / num)// 行数

    if (rowNum > 1) {
      for (let i = 0; i < rowNum; i++) {
        let temp = ''
        let start = i * num
        let end = start + num

        temp = value.substring(start, end) + '\n'
        str += temp
      }
      return str
    } else {
      return value
    }
  }
},