ECHARTS学习

坐标轴

option = {
  xAxis: {
    type: 'category',
    data: ['A', 'B', 'C']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      data: [120, 200, 150],
      type: 'line'
    }
  ]
};

1、坐标轴的默认类型type是数值型，而xAxis指定了类目型的data，所以Echarts也能识别出这是类目型的坐标轴，所以这里的type: 'category'可以不写。

2、xAxis代表x轴。type:'category'代表类目轴。适用于离散的类目数据，类目数据可自动从series.data或者xAxis.data设置类目数据。

可以如下，设置每个值得颜色，线条得颜色，单个值得特殊颜色

3、坐标轴轴线xAxis.axisLine.symbol:'arrow'左右有箭头  :['none','arrow']右边是箭头

   xAxis: {
      type: "value",
      axisLine: {
        onZero:false,   //X 轴或者 Y 轴的轴线是否在另一个轴的 0 刻度上，
只有在另一个轴为数值轴且包含 0 刻度时有效。
         show: true
      },

onZero:false,默认true 

value类型数值轴，默认不展示轴线 ！

4、刻度 xAxis.axisTick.length 刻度线长度

xAxis.axisTick.alignWithLabel：true  刻度线与标签对齐

5、刻度标签xAxis.axisLabel.formatter:'{value} 米'    -给标签值增加单位

强制显示第一个和最后一个刻度：

6、splitLine：true网格线  -数值轴默认显示，类目轴不显示,time轴默认不展示

   xAxis: {
      splitLine: {
         lineStyle: {
            show: true,
            color: "red",
            type: "dashed",
         },
      },
   }

7、series.symbol: 'none'  'emptyCircle'   标记的图形

8、series.showSymbol: true    是否展示标记的图形，好像默认true 

9、xAxis.boundaryGap: false  默认true，坐标轴两边留白策略;看着不留白，值跟刻度线对齐了！

 10、区域填充样式，如上图；color颜色  ；origin:'end'-填充顶部  origin:200 -从200开始填充

  series: [
    {
      data: [820, 932, 901, 934, 1290, 1330, 1320],
      type: 'line',
      areaStyle: {}
    }
  ]

10、legend 指上面的图例组件   

-不写data，只写legend，貌似会自动生成图形组件（自动生成series里对象的name）

icon:图例；

triangle  rect  circle(默认)  roundRect diamond pin none

legend: {
  textStyle: {
         color: "red",   //图例文字的颜色和大小
        fontSize: 12,
         },
  icon: "rect", //图例形状
   itemGap: 55,  //图例间隔
itemWidth: 30,  //图例宽度
itemHeight: 30,  //图例高度
top: 0,
                    }

11、图例组件展现了不同系列的标记(symbol)，颜色和名字。可以通过点击图例控制哪些系列不显示。当图例数量过多，可以设置水平滚动、垂直滚动。

  legend: {
    data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine', 'Search Eng1ine', 'Search Eng2ine', 'Search Eng3ine', 'Search Eng4ine', 'Search Eng5ine', 'Search Eng6ine', 'Search Eng7ine'],
    type: 'scroll',            //设置数量过多时的滚动
    top: 25,
   // orient: 'vertical'     //设置垂直
  }

12、tooltip 提示框组件 

  tooltip: {
    trigger: 'axis'
  }

 tooltip.axisPointer.type

  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'cross'
    },

cross:十字准星指示器 

line:直线指示器   -默认得

 13、曲线图形上的文本标签 label

series.label.show:true 

  series: [
    {
      name: 'Search Engine',
      type: 'line',
      label: {
        show: true,
        position: 'top'
      },
      data: [820, 932, 901, 934, 1290, 1330, 1320]
    }
  ]

折线图 ：

柱状图： 

14、markPoint  曲线图标标注   markLine 图标标线

  series: [
    {
      name: 'Highest',
      type: 'line',
      data: [10, 11, 13, 11, 12, 12, 9],
      markPoint: {
        data: [
          { type: 'max', name: 'Max' },
          { type: 'min', name: 'Min' }
        ],
          symbol: 'pin'  //默认的
      },
      markLine: {
        data: [{ type: 'average', name: 'Avg' }]
      }
    }]

15、存在两个Y轴 series.yAxisIndex: 1 使用第2个y轴 

16、柱状图   就是将series的type设置成 'bar' 

17、数据堆叠 stack:'total'   

-只能堆叠value和log类型，不支持time和category类型的类目轴

statck好像可以任意字符串值 

   series: [
      {
          name: "正面",
          type: "bar",
          stack: "total",
          data: [1,2,3]
        },
        {
          name: "中性",
          type: "bar",
          stack: "total",
          data: [4,5,6]
        },
        {
          name: "负面",
          type: "bar",
          stack: "total",
          data: [7,8,9]
        }
   ]

18、坐标轴倒转   -将x轴设置成value，y轴设置成category类目轴

   xAxis: {
      type: "value",
   },
   yAxis: {
      type: "category",
      data: ['a','b','c']
   },

19、折线图折线得默认粗细颜色，和鼠标放上去得粗细颜色 series.lineStyle

    series: [
        {
            name: 'Spectrum',
            type: 'line',
            showSymbol: false,
            data: datas,
            lineStyle: {
                //设置线条默认样式
                normal: {
                    width: 1,color:'yellow'
                },
                //设置线条hover样式
                emphasis: { width: 2 ,color: 'red'},
            }
        },
    ]

20、time轴得数据模拟，使用 let noe = new Date(), new Date(+now + 1000)  //加1秒

let now = new Date('2024-05-10 00:00:00')； 

let now = new Date('2024-05-11')   --8点开始得 

let now = new Date(2024, 5, 11)   --0点开始 

21、实时动态更新折线

setInterval(function () {
    datas.shift();
    datas.push(randomData());
    myChart.setOption({
        series: [
            {
                data: datas,
            },
        ],
    });
}, 1000);

22、柱状图背景色  series.showBackground:true

23、tooltips.formatter

有几个series数组，params就有几个值

    formatter: function (params) {
      var tar = params[1];
      return tar.name + '<br/>' + tar.seriesName + ' : ' + tar.value;
    }

24、transparent  透明色