echarts的基础配置

1 主要配置

主要配置：series xAxis yAxis grid tooltip title legend color

1. series
   系列列表。每个系列通过 type 决定自己的图表类型
2. xAxis
   直角坐标系 grid 中的 x 轴
   boundaryGap： 是否让线条（或柱子）和坐标轴有缝隙
3. yAxis
   直角坐标系 grid 中的 y 轴
4. grid
   直角坐标系内绘图网格
5. title
   标题组件
6. tooltip
   提示框组件
7. legend
   图例组件
8. color
   调色盘颜色列表 ( 柱状图中柱子颜色或折线图中线条颜色 )

记忆图：

2 画图步骤

1. 找到图表所在的位置，进行初始化

var myChart = echarts.init(document.querySelector(".chart"));

2. 设置配置项option

var option = {}

3. 将配置项option设给chart

myChart.setOption(option);

另外：让图表跟随屏幕自适应

window.addEventListener("resize", function() {
        myChart.resize();
});

注意事项：

1.关于xAxis的属性：boundaryGap

折线图中一般设置为false

柱状图中一般设置为true（默认就是true）

2.关于legend中的data与series中的name

series里面有了 name值则 legend里面的data可以删掉

3.关于x轴和y轴上的相关设置

axisLabel：表示刻度标签
axisTick：表示刻度
axisLine：表示坐标轴线

4.echarts中一些漂亮的图网址：

https://www.makeapie.com/explore.html