echarts学习笔记

主要记录option里面的相关知识
官方文档：https://echarts.apache.org/zh/option.html#title

入门示例

option = {
  xAxis:{// 设置x轴
    type: 'category',// 类目轴，即x轴上列出的是数据的分类，因此是需要data属性
    data: ['a', 'b', 'c']// 明确指出x轴上需要列出的有哪些分类
  },
  yAxis: {// y轴
    type: 'value'// 数值轴，不需要设置data了，会自动根据实际数据自动确定范围
  },
  series: [
    {
      name: 'wen',//代表是三个分类下的wen的数据
      type: 'bar',//图形类型 bar柱状图，line拆线图，pie饼图
      data: [79,92,83]
    }]
};

柱状图

var xData = ['张三', '李四', '王五', '周土', '小明', '茅台', '二姐', '大强'];
var yData = [88, 92, 63, 77, 94, 80, 72, 86];
option = {
  xAxis: {
    type: 'category',
    data: xData
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      name: '语文',
      type: 'bar',
      data: yData,
      markPoint: {// 标记点
        data: [
          {
            type: 'max',
            name: '最高分'
          },
          {
            type: 'min',
            name: '最低分'
          }
        ]
      },
      markLine://横线
        {
         data:[{
           type:'average',
           name:'平均分',
         }] 
        },
        label:{
          show:true,//是否显示
          rotate:60,//旋转
          position:'inside'
        },
        barWidth:20//当前柱状图的宽度
    }
  ]
};

转成横向的话，只需要在上面代码的基础上，交换xAxis和yAxis的配置即可

  xAxis: {
    type: 'value'
  },
  yAxis: {
    type: 'category',
    data: xData
  },

通用配置

title

• 文字样式
• 边框
• 位置

  title:{
    text:'成绩',
    textStyle:{
      color:'red'
    },
    borderWidth:5,//边框宽度
    borderColor:'yellow',//边框颜色
    borderRadius:30, //边框圆角
    left:300,//位置偏移
    top:50
  }

tooltip

  tooltip:{
    trigger:'item'//自动拼接显示的内容
  },

  tooltip:{
    trigger:'axis'//只要鼠标在柱状图中，就会显示离其最近的那个轴的数据
  },

  tooltip:{
    trigger:'item',
    triggerOn: "click",//指定鼠标点击时才触发弹出提示框
    formatter: '{b}的{a}成绩是{c}分'
  },

https://echarts.apache.org/zh/option.html#tooltip.formatter

  tooltip:{
    trigger:'item',
    formatter:function(obj){//也可以使用回调函数
      console.dir(obj);
      return "";
    }
  },

toolbox

  toolbox:{
    feature:{//功能设置
      saveAsImage:{}//开启了下载为图片，即使什么都不配，也会出现该功能
    }
  },

  toolbox: {
    //功能设置
    feature: {
      // 数据视图
      dataView: {}
    }
  },

  toolbox: {
    //功能设置
    feature: {
      //还原功能
      restore: {}
    }
  },

  toolbox: {
    //功能设置
    feature: {
      //缩放
      dataZoom: {},
      magicType: {//图形类型切换
        type: ['bar', 'line']
      }
    }
  },

legend

图例，用于筛选系列，即点哪个系列哪个系列的显示与否就会进行切换，需要和series配合使用

var xData = ['张三', '李四', '王五', '周土', '小明', '茅台', '二姐', '大强'];
var yData = [88, 92, 63, 77, 94, 80, 72, 86];
var yData2 = [93, 60, 61, 62, 85, 79, 92, 30];
option = {
  title: {
    text: '成绩',
    textStyle: {
      color: 'red'
    },
    borderWidth: 5, //边框宽度
    borderColor: 'yellow', //边框颜色
    borderRadius: 30, //边框圆角
    left: 300, //位置偏移
    top: 50
  },
  legend:{
    data:['语文','数学'] //该数组中每一个元素都是字符串，且需要与series里面的元素的name的值一致
  },
  xAxis: {
    type: 'category',
    data: xData
  },
  tooltip: {
    trigger: 'item',
    formatter: '{b}的{a}成绩是{c}分'
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      name: '语文',
      type: 'bar',
      data: yData,
    }, 
    {
        name:'数学',
        type:'bar',
        data:yData2
      },
  ]
};

markArea 区域标记

var xData = [];
for (let i = 1; i < 13; i++) {
  xData.push(i + '月');
}
var yData = [3000, 2800, 900, 1000, 800, 700, 1400, 1300, 900, 1000, 800, 600];
option = {
  title: {text: '康师傅销量走势'},
  xAxis: {type: 'category',data: xData},
  yAxis: {type: 'value'},
  series: [
    {
      name: '康师傅',
      data: yData,
      type: 'line',
      markArea: {
        data: [//数组下的元素也是数组
          [//每个数组里面需要有两个元素
            {
              xAxis: '1月'//默认第一个元素为开始点
            },
            {
              xAxis: '2月'//默认第二个元素为结束点
            }
          ],
          [
            {
              xAxis: '7月'
            },
            {
              xAxis: '8月'
            }
          ]
        ]
      }
    }
  ]
};

平滑和线条

smooth:true,//拆线会变得比较光滑
lineStyle:{//设置线型
  color:'red',
  type:'dashed'
},

面积

areaStyle:{//被折线所包起来的区域
  color:'pink'
},

紧挨边缘

xAxis: {
  type: 'category',
  data: xData,
  boundaryGap:false // 使得x轴的第一个元素紧挨y轴
},

脱离0值

  yAxis: {
    type: 'value',
    scale: true // 使得数值轴脱离0值，自动调整范围，比如这里的y轴不再从0开始
  },

堆叠图

series: [
  {
    name: '康师傅',
    data: yData,
    type: 'line',
    stack:'all'
  },
  {
    name:'白象',
    data:yData2,
    type:'line',
    stack:'all'
  }
]

散点图

用以推断变量间的相关性

option = {
  xAxis: {
  	type: 'value',	//设置成数值轴
  	scale: true		//脱离0值约束
  },
  yAxis: {
  	type: 'value',
  	scale: true	
  },
  series: [
    {
      symbolSize: 20,//设置散点的大小
      data: [//需要是一个二维数组
        [10.0, 8.04],[8.07, 6.95], [13.0, 7.58], [9.05, 8.81], [11.0, 8.33], [14.0, 7.66], [13.4, 6.81], [10.0, 6.33], [14.0, 8.96], [12.5, 6.82], [9.15, 7.2], [11.5, 7.2], [3.03, 4.23], [12.2, 7.83], [2.02, 4.47], [1.05, 3.33], [4.05, 4.96], [6.03, 7.24], [12.0, 6.26], [12.0, 8.84], [7.08, 5.82], [5.02, 5.68]
      ],
      type: 'scatter'		//散点图类型
    }
  ]
};