echarts饼状图，柱状图，折线图 简单样式

 

html

  <div class="main">
      <!-- 上 饼状图和柱状图-->
      <div class="main-top">
        <!-- 饼状图 -->
        <div class="main-pie-chart">
          <div class="main-pie-span"><span>报警类型占比</span></div>
          <div ref="myChart" id="echart-pie"></div>
        </div>
        <!-- 柱状图 -->
        <div class="main-bar-chart">
          <div class="main-bar-span"><span>报警类型柱状图</span></div>

          <div ref="myChart" id="echart-bar"></div>
        </div>
      </div>
      <!-- 折线图-->
      <div class="main-bottom">
        <div class="main-line-span"><span>报警类型折线图</span></div>

        <div ref="myChart" id="echart-line"></div>
      </div>
    </div>

js

初始化

 mounted() {
        this.getBarEcharts();
        this.getPieEcharts();
        this.getLineEcharts();
  },

1、饼状图

 // 饼状图
    getPieEcharts() {
      let myChart = this.$echarts.init(document.getElementById("echart-pie"));
      myChart.setOption({
        // 鼠标悬浮
        tooltip: {
          trigger: "item",
        },
        // 右部标识
        legend: {
          orient: "vertical", //垂直排列
          top: "35%",
          left: "right",
          left: "70%",
          icon: "circle", //图表样式矩形
          itemGap: 25, //图例图标与文字间的间距
          //文字设置
          textStyle: {
            color: function (params) {
              if (theme) {
                return "#fff";
              } else {
                return "#000";
              }
            },
            fontWeight: 700,
          },
        },
        series: [
          {
            name: "报警类型占比",
            type: "pie",
            radius: ["30%", "60%"],
            center: ["40%", "50%"],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: "center",
            },
            emphasis: {
              label: {
                show: true,
                fontSize: 20,
                fontWeight: "bold",
              },
            },
            labelLine: {
              show: false,
            },
            data: [
              { value: 1048, name: "一级报警" },
              { value: 735, name: "二级报警" },
              { value: 580, name: "三级报警" },
            ],
            // 图表颜色样式
            itemStyle: {
              normal: {
                color: function (colors) {
                  var colorList = ["#fa8c71", "#1f87e6", "#29bb6a"];
                  return colorList[colors.dataIndex];
                },
              },
            },
          },
        ],
      });
    },

2、柱状图

 //柱状图
    getBarEcharts() {
      let myChart = this.$echarts.init(document.getElementById("echart-bar"));
      myChart.setOption({
        // 右部标识
        legend: {
          left: "right",
          top: "5%",
          left: "70%",
          icon: "circle", //图表样式矩形
          //文字设置
          textStyle: {
            color: function (params) {
              if (theme) {
                return "#fff";
              } else {
                return "#000";
              }
            },
            fontWeight: 700,
          },

          data: ["one", "two", "three"],
        },

        // 鼠标悬浮显示
        tooltip: {
          trigger: "axis",
          axisPointer: { type: "none" },
        },
        xAxis: {
          type: "category",
          data: [
            "报警类型一",
            "报警类型二",
            "报警类型三",
            "报警类型四",
            "报警类型五",
            "报警类型六",
          ],
          //  x轴文字的颜色设置为白色
          axisLabel: {
            color: "#fff",
            fontSize: 12,
            interval: 0,
          },
          //x轴颜色
          axisLine: {
            lineStyle: {
              color: "#fff",
            },
            // show: false,
          },
          // 不显示刻度
          axisTick: {
            show: false,
          },
        },
        yAxis: {
          type: "value",
          // 不显示y轴刻度
          axisTick: {
            show: false,
          },
          //  y轴文字的颜色设置为白色
          axisLabel: {
            color: "#fff",
          },
          // 不显示y轴的线
          axisLine: {
            show: false,
          },
          // 分割线颜色
          splitLine: {
            lineStyle: {
              color: "#616161",
              type: "dashed", //虚线
            },
          },
        },

        series: [
          {
            name: "one",
            barWidth: "10%", //柱子宽度
            barGap: 0.5, //柱子间距
            data: [120, 200, 150, 80, 70, 110, 130],
            type: "bar",

            itemStyle: {
              color: "#4b55f7",
              // borderColor: "rgba(221, 220, 107, .1)",
              barBorderRadius: 8,
            },
          },
          {
            name: "two",
            barWidth: "10%", //柱子宽度
            barGap: 0.5, //柱子间距
            data: [120, 200, 150, 80, 70, 110, 130],
            type: "bar",

            itemStyle: {
              color: "#27c420",
              // borderColor: "rgba(221, 220, 107, .1)",
              barBorderRadius: 8,
            },
          },
          {
            name: "three",
            barWidth: "10%", //柱子宽度
            barGap: 0.5, //柱子间距
            data: [120, 200, 150, 80, 70, 110, 130],
            type: "bar",

            itemStyle: {
              color: "#f6ad0c",
              // borderColor: "rgba(221, 220, 107, .1)",
              barBorderRadius: 8,
            },
          },
        ],
      });
    },

3、折线图

 // 折线图
    getLineEcharts() {
      let arrList = [];
      for (let i = 0; i < 30; i++) {
        arrList[i] = i;
      }
      let myChart = this.$echarts.init(document.getElementById("echart-line"));
      myChart.setOption({
        tooltip: {
          trigger: "axis",
          axisPointer: { type: "none" },
        },
        // 顶部标识样式
        legend: {
          left: "right",
          top: "5%",
          left: "85%",
          icon: "circle", //图表样式圆
          data: ["参数一", "参数二"],
          //文字设置
          textStyle: {
            color: function (params) {
              if (theme) {
                return "#fff";
              } else {
                return "#000";
              }
            },
            fontWeight: 700,
          },
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        // toolbox: {
        //   feature: {
        //     saveAsImage: {},
        //   },
        // },

        xAxis: {
          type: "category",
          boundaryGap: false,
          data: arrList,
          //  x轴文字的颜色设置为白色
          axisLabel: {
            color: "#fff",
            fontSize: 12,
            interval: 0,
          },
          //x轴颜色
          axisLine: {
            lineStyle: {
              color: "#fff",
            },
            // show: false,
          },
          // 不显示刻度
          axisTick: {
            show: false,
          },
        },
        yAxis: {
          type: "value",
          // 不显示y轴刻度
          axisTick: {
            show: false,
          },
          //  y轴文字的颜色设置为白色
          axisLabel: {
            color: "#fff",
          },
          // 不显示y轴的线
          axisLine: {
            show: false,
          },
          // 分割线颜色
          splitLine: {
            lineStyle: {
              color: "#616161",
              type: "dashed", //虚线
            },
          },
        },
        series: [
          {
            name: "参数一",
            type: "line",
            stack: "Total",
            color: "#187583",
            smooth: true, //波浪线
            data: [
              120, 132, 101, 134, 90, 230, 210, 120, 132, 101, 134, 90, 230,
              210, 120, 132, 101, 134, 90, 230, 210, 120, 132, 101, 134, 90,
              230, 210,
            ],
          },
          {
            name: "参数二",
            type: "line",
            stack: "Total",
            color: "#74cd46",
            smooth: true, //波浪线
            data: [
              220, 182, 191, 234, 290, 330, 310, 120, 132, 101, 134, 90, 230,
              210, 120, 132, 101, 134, 90, 230, 210, 120, 132, 101, 134, 90,
              230, 210,
            ],
          },
        ],
      });
    },