echarts 单组件页面

<template>

  <div>

    <div id="chartLineBox" style="width: 100%; height: 100%"></div>

  </div>

</template>



<script>

import * as echarts from "echarts";

export default {

  name: "",

  components: {},

  props: {},

  data() {

    return {};

  },

  methods: {},

  computed: {},

  watch: {},

  created() {},

  mounted() {

    this.chartLine = echarts.init(document.getElementById("chartLineBox"));



    // 指定图表的配置项和数据

    var option = {

      tooltip: {

        //设置tip提示

        trigger: "axis",

      },



      legend: {

        //设置区分（哪条线属于什么）

        data: ["数据1", "数据2"],

        textStyle: {

          fontWeight: "normal",

          color: "rgb(255, 255, 255)", //legend颜色

          fontSize: "25",

        },

      },

      color: ["#8AE09F", "#5A56D1"], //设置区分（每条线是什么颜色，和 legend 一一对应）

      xAxis: [

        {

          type: "category",

          boundaryGap: false,

          data: ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12"],

          //  改变x轴颜色

          axisLine: {

            lineStyle: {

              color: "rgb(255, 255, 255)",

            },

          },

          //  改变x轴字体颜色和大小

          axisLabel: {

            textStyle: {

              color: "rgb(255, 255, 255)",

              fontSize: "25",

            },

          },

        },

      ],

      yAxis: [

        {

          type: "value",

          //  改变y轴颜色

          axisLine: {

            lineStyle: {

              color: "rgb(255, 255, 255)",

            },

          },

          splitLine: {

            show: false, //去掉折线图中的横线

          },

          //  改变y轴字体颜色和大小

          axisLabel: {

            // formatter: '{value} m³ ', //  给y轴添加单位

            textStyle: {

              color: "rgb(255, 255, 255)",

              fontSize: "25",

            },

          },

        },

      ],

      series: [

        {

          name: "数据1",

          data: [220, 232, 201, 234, 290, 230, 220, 220, 220, 220, 220, 220],

          type: "line", // 类型为折线图

          lineStyle: {

            // 线条样式 => 必须使用normal属性

            normal: {

              color: "#8AE09F",

            },

          },

          smooth: true,

          areaStyle: {

            normal: {

              color: {

                x: 0,

                y: 0,

                x2: 0,

                y2: 1,

                colorStops: [

                  {

                    offset: 0,

                    color: "#0A3323", // 0% 处的颜色

                  },

                  {

                    offset: 0.7,

                    color: "#0A3323", // 100% 处的颜色

                  },

                ],

                globalCoord: false, // 缺省为 false

              },

            },

          },

        },

        {

          name: "数据2",

          data: [120, 200, 150, 80, 70, 110, 60, 60, 40, 100, 20, 20],

          type: "line",

          lineStyle: {

            normal: {

              color: "#5A56D1",

            },

          },

          smooth: true,

          areaStyle: {

            normal: {

              color: {

                x: 0,

                y: 0,

                x2: 0,

                y2: 1,

                colorStops: [

                  {

                    offset: 0,

                    color: "#191949", // 0% 处的颜色

                  },

                  {

                    offset: 0.7,

                    color: "#191949", // 100% 处的颜色

                  },

                ],

                globalCoord: false, // 缺省为 false

              },

            },

          },

        },

      ],

    };



    // 使用刚指定的配置项和数据显示图表。

    this.chartLine.setOption(option);

  },

};

</script>



<style scoped lang="scss">

</style>