echarts配置

echarts需要了解的配置：series、xAxis、yAxis、grid、tooltip、title、legend、color

1、title：标题

2、tooltip：{

        trigger(触发方式)：'axis'(坐标轴)  'item'(柱状图)

        }    鼠标悬停上去出现的提示小框

3、legend：图例组件

4、toolbox：工具箱组件：另存为图片

        toolbox: {
            feature: {
              saveAsImage: {}
            }
          },

 5、gird：网格配置 可以控制图表的大小

grid:内小红盒子

DOM：外大红盒子

 grid: {
    left: '3%',  图表左侧距离DOM元素的距离
    right: '4%',
    bottom: '3%',
    containLabel: true：是否显示刻度
  },

 6、xAixs：x轴

        xAxis: {
            type: 'category', ：坐标轴类型

                     
            boundaryGap: false, 坐标与坐标轴之间是否有距离
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] ：数据
          },

 7、yAixs：y轴

 8、series：系列图表配置，它决定显示哪种类型的图表。是个数组，包含若干对象，一个对象一条线。series里有了name属性的话，可以把legend里的data删掉。

         series: [
            {
              name: 'Email',
              type: 'line', ：类型
              stack: 'Total', ：总量 数据堆叠，一般不需要，有了它数据不会发生重叠
              data: [120, 132, 101, 134, 90, 230, 210]
            },]

  9、color：线的颜色

        color：[] 是个数组

10、让图表自适应屏幕而变化

        window.addEventListener("resize",function() =>{

                myChart.resize();

                })

最后，去官网实例找到类似的图表，稍加修改即可

这篇好文章是转载于：学新通技术网