爆改线形统计图（ECharts 图表）

要修改线形统计图（ECharts 图表）的线条颜色，可以直接通过 series 中的 lineStyle 配置项来调整线条的颜色。 

当前的配置中，

var option = {
    tooltip: {
        trigger: "axis",
        backgroundColor: "rgba(0, 0, 0, 0.5)",
        borderColor: "#9BA7B3", // 设置边框颜色
        borderWidth: 0.5,
        textStyle: {
            color: "#fff",
            fontSize: "13px",
        },
        formatter: function (a) {
            let list = [];
            let listItem = "";
            for (var i = 0; i < a.length; i++) {
                list.push(`${a[i].name}：${a[i].value}m³`);
            }
            listItem = list.join("<br/>");
            return '<div style="padding:6px;">' + listItem + "</div>";
        },
        extraCssText: 'border-radius: 10px;'
    },
    color: ['#1DD7F0'],  // 图表的默认颜色
    title: {
        text: '单位：m³', // 主标题
        left: '2.5%', //
        top: '0.7%',
        textStyle: {
            color: '#FFFFFF', // 字体颜色
            fontSize: 14, // 字体大小
            fontWeight: 'normal' // 设置字体不加粗
        }
    },
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
    xAxis: [
        {
            type: 'category',
            boundaryGap: false,
            splitLine: { // 隐藏x轴上的网格线
                show: false
            },
            axisLine: { // 修改这部分配置
                lineStyle: {
                    color: '#0E2F5B' // 设置轴线颜色
                }
            },
            axisTick: {
                show: false,
            },
            axisLabel: {
                textStyle: {
                    color: '#FFFFFF'
                }
            },
            data: x_data
        },
    ],
    yAxis: [
        {
            splitLine: { // 隐藏y轴上的网格线
                show: false
            },
            axisLabel: {
                textStyle: {
                    color: '#FFFFFF'
                }
            },
            axisLine: { // 显示并设置y轴轴线样式
                show: true, // 显示轴线
                lineStyle: {
                    color: '#0E2F5B', // 轴线颜色
                    width: 1, // 轴线宽度
                    type: 'solid' // 轴线类型，'solid' 表示实线
                }
            },
            type: 'value'
        }
    ],
    series: [
        {
            name: '流量',
            type: 'line',
            showSymbol: false,
            smooth: true,
            lineStyle: {
                color: '#FF5733', // 修改线条颜色，例如设置为红色
                width: 3,         // 设置线条宽度
                type: 'solid'     // 设置线条类型
            },
            areaStyle: {
                //渐变色背景
                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                    {
                        offset: 0.1,
                        color: "rgba(60, 70, 255, 0)",
                    },
                    {
                        offset: 1,
                        color: "rgba(25, 125, 240, 1)",
                    },
                ]),
            },
            data: dataList
        },
    ]
};

var chart = echarts.init(document.getElementById('chartR3'));
// 使用刚指定的配置项和数据显示图表。
chart.setOption(option);

series 使用了 areaStyle 来设置渐变色，但并没有设置 lineStyle 来控制线条本身的颜色。为了修改线条颜色，我们可以在 series 配置中加入 lineStyle 选项。

## 总结折线图属性 ：

简单的折线图

option = {
  xAxis: {
    type: 'category', //类目型
    data: ['A', 'B', 'C']
  },
  yAxis: {
    type: 'value' // 数值型
  },
  series: [
    {
      data: [120, 200, 150], //折线图三个点
      type: 'line', //dashed:虚线 line：实线
    }
  ]
};
//通过 xAxis 将横坐标设为类目型，并指定了对应的值；通过 type 将 yAxis 的类型设定为数值型。在 //series 中，我们将系列类型设为 line，并且通过 data 指定了折线图三个点的取值

笛卡尔坐标系中的折线图

 把 series 的 data 每个数据用一个包含两个元素的数组

 series: [
    {
      data: [
        [20, 120],
        [50, 200],
        [40, 50]
      ],
      type: 'line'
    }
  ]

可以设置折线样式

指定颜色、线宽、折线类型、阴影、不透明度等等； series.lineStyle 设置：颜色（color）、线宽（width）、折线类型（type） 、描边颜色（borderColor）、描边宽度（borderWidth）、描边类型（borderType）、阴影（shadowColor）、不透明度（opacity）

 series: [
    {
      data: [10, 22, 28, 23, 19],
      type: 'line',
      lineStyle: {
        normal: {
          color: 'green',
          width: 4,
          type: 'dashed'
        }
      }
    }
  ]

数据点处显示数值

 通过 series.label 属性指定。如果将 label 下的 show 指定为true，则表示该数值默认时就显示；如果为 false，而 series.emphasis.label.show 为 true，则表示只有在鼠标移动到该数据时，才显示数值

且表示空数据时使用‘-’表示

option = {
  xAxis: {
    data: ['A', 'B', 'C', 'D', 'E']
  },
  yAxis: {},
  series: [
    {
      data: [10, 22, '-', 23, 19],//- 表示空数据
      type: 'line',
      label: {
        show: true, //在折线图中显示具体数值
        position: 'bottom',// 显示位置在点下
        textStyle: {
          fontSize: 20 //字体样式 20px
        }
      }
    }
  ]
};