蓝桥杯——echarts

一、图的基本信息 

1.1、title 图的标题

text:"标题名"

1.2、xAxis——x轴 

其type：category表示类目，

1.3、yAxis——y轴 

yAxis 默认type:value

series中定义了y轴的值其中 type:line(折线图)，bar(柱状图)，pie(饼图）

二、折线图

2.1基础折线图

 var option = {
      title: {
        text: "一周的手机使用时长",
      },
      // x和y轴整反了
      xAxis: {
        type: "category",
        data: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"],
      },
      yAxis: {
        type: "value",
      },
      series: [
        {
          data: [2.5, 2, 2.6, 3.2, 4, 6, 5],
          type: "line",
        },
      ],
    };
    myChart.setOption(option);

 

2.2笛卡尔折线图——连续（二维数据）

 

2.3折线图样式

2.3.1linestyle

 

2.3.2 在数据点中显示数字

 

2.3.2空数据

 

2.4 折叠折线图 

2.5 平滑曲线图

 2.6 阶梯线图

 

三、柱状图

3.1基础柱状图 

3.2多系列柱状图 

3.3柱条样式 

 

 3.4柱条间距

3.5 柱条添加背景颜色

 

3.5堆叠柱状图

 3.6动态排序柱状图