Echarts绘图

本想记录点什么，但是个人觉得Echarts官网写的很详细，这里就记录一个页面吧。

页面显示效果如下：## 静态页面代码：

<template>
  <div class="content">
    <div class="top">
      <div class="left_box">2021年09月21日 星期二</div>
      <div class="center_box">领导驾驶舱</div>
      <div class="right_box">评分更新时间：2021-12-31</div>
    </div>
    <div class="c_box">
      <div class="box_li">
        <div class="li_title">信用优（户）</div>
        <div class="li_number">2130</div>
        <div class="li_text"><span>今日新增</span><span>50</span><span class="upArrow"></span></div>
        <div
          class="li_chart"
          id="li_chart1"
        ></div>
      </div>
      <div class="box_li">
        <div class="li_title">信用良（户）</div>
        <div class="li_number">8806</div>
        <div class="li_text"><span>今日新增</span><span>150</span><span class="upArrow"></span></div>
        <div
          class="li_chart"
          id="li_chart2"
        ></div>
      </div>
      <div class="box_li">
        <div class="li_title">信用中（户）</div>
        <div class="li_number">8806</div>
        <div class="li_text"><span>今日减少</span><span>150</span><span class="downArrow"></span></div>
        <div
          class="li_chart"
          id="li_chart3"
        ></div>
      </div>
      <div class="box_li">
        <div class="li_title">信用差（户）</div>
        <div class="li_number">8806</div>
        <div class="li_text"><span>今日减少</span><span>150</span><span class="downArrow"></span></div>
        <div
          class="li_chart"
          id="li_chart4"
        ></div>
      </div>
      <div class="box_li">
        <div
          class="chart_right"
          id="chart1"
          style="width: 100%; height: 100%; position: relative; overflow: hidden;"
        >
          ></div>
      </div>
    </div>
    <div class="b_box">
      <div class="leftBox">
        <div class="title_box">所属行业平均得分</div>
        <div class="conlist_box">
          <div class="th_box">
            <div>排名</div>
            <div>行业名称</div>
            <div>指标分值</div>
          </div>
          <div
            class="td_box"
            v-for="(item,index) in listProgess"
            :key="index"
          >
            <div>{{index+1}}</div>
            <div>
              <div class="small_title">{{item.name}}</div>
              <div class="">
                <el-progress
                  :percentage="item.value"
                  :show-text="false"
                  stroke-width='4'
                  :color="item.color?item.color:'#ffd800'"
                ></el-progress>
              </div>
            </div>
            <div>{{item.number}}</div>
          </div>
        </div>
      </div>
      <div class="centerBox">
        <div class="centerTop">
          <div class="title_box">所属行业平均得分</div>
          <div
            class="echart_box"
            id="echart2"
          ></div>
        </div>
        <div class="centerBottom">
          <div class="centerBottombox">
            <div class="title_box">企业成立时间</div>
            <div
              class="echart_1"
              id="main1"
            ></div>
          </div>
          <div class="centerBottombox">
            <div class="title_box">企业缴存职工人数</div>
            <div
              class="echart_2"
              id="main2"
            ></div>
          </div>
        </div>
      </div>
      <div class="leftBox">
        <div class="title_box">所属经济平均得分</div>
        <div class="conlist_box">
          <div class="th_box">
            <div>排名</div>
            <div>行业名称</div>
            <div>指标分值</div>
          </div>
          <div
            class="td_box"
            v-for="(item,index) in listProgess"
            :key="index"
          >
            <div>{{index+1}}</div>
            <div>
              <div class="small_title">{{item.name}}</div>
              <div class="">
                <el-progress
                  :percentage="item.value"
                  :show-text="false"
                  stroke-width='4'
                ></el-progress>
              </div>
            </div>
            <div>{{item.number}}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import * as echarts from "echarts";

export default {
  name: "twentyfiveday",
  data() {
    return {
      //
      listProgess: [
        { name: "金融业", value: 20, number: 923 },
        { name: "金融业", value: 20, number: 923 },
        { name: "金融业", value: 20, number: 923 },
        { name: "金融业", value: 20, number: 923 },
        { name: "金融业", value: 20, number: 923 },
        { name: "金融业", value: 20, number: 923 },
        { name: "金融业", value: 20, number: 923 },
        { name: "金融业", value: 20, number: 923 },
        { name: "金融业", value: 20, number: 923 },
        { name: "金融业", value: 20, number: 923 }
      ],
      chart1List: [
        { value: 1048, name: "优" },
        { value: 735, name: "良" },
        { value: 580, name: "中" },
        { value: 484, name: "差" }
      ],
      main1List: [
        { value: 123, name: "1-3年" },
        { value: 62, name: "3-5年" },
        { value: 102, name: "5-10年" },
        { value: 34, name: "10年以上" }
      ],
      main2List: [
        { value: 122, name: "0-99人" },
        { value: 123, name: "100-499人" },
        { value: 123, name: "500-999人" },
        { value: 200, name: "1000-9999人" },
        { value: 200, name: "10000人以上" }
      ],
      //
      list1: [820, 932, 901, 934, 129, 133, 192, 340, 129, 130, 192, 340, 123],
      list2: [82, 93, 201, 934, 1290, 130, 19, 340, 120, 130, 193, 340, 123]
    };
  },
  methods: {
    //画饼图
    chart_write(elemete, list) {
      const that = this;
      let myChart = echarts.init(document.getElementById(elemete));
      let option = {
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b}: {c} ({d}%)"
        },
        legend: {
          itemGap: 15,
          top: "center",
          right: "5%",
          orient: "vertical",
          width: "50%",
          icon: "circle",
          formatter: function(name) {
            let itfind = list.find(item => item.name == name);
            let sum = that.getSum(list, "value");
            return `${name} ${((itfind.value / sum) * 100).toFixed(2)}%`;
          },
          textStyle: {
            color: "#fff",
            fontSize: 14
          }
        },
        series: [
          {
            name: "用户数及占比",
            type: "pie",
            center: ["60%", "50%"],
            radius: ["40%", "70%"],
            avoidLabelOverlap: true,
            width: "50%",
            label: {
              show: false
            },
            emphasis: {
              label: {
                show: false,
                formatter: "{d}",
                fontSize: 20,
                fontWeight: "bold"
              }
            },
            labelLine: {
              show: false
            },
            data: list
          }
        ]
      };
      myChart.setOption(option);
    },
    //获取数组对象中某个对象的和
    getSum(arr, key) {
      return arr.reduce((prev, curr) => {
        return prev + curr[key];
      }, 0);
    },
    //画中间的变化曲线图
    echart2_write() {
      let myChart = echarts.init(document.getElementById("echart2"));
      let option = {
        legend: {
          lineStyle: {
            color: "#fff"
          }
        },
        grid: {
          show: false
        },
        xAxis: {
          type: "category",
          name: "分数",
          boundaryGap: false,
          data: [
            300,
            350,
            400,
            450,
            500,
            550,
            600,
            650,
            700,
            750,
            800,
            850,
            900,
            950,
            1000
          ]
        },
        yAxis: {
          type: "value",
          name: "企业数",
          alignTicks: true,
          splitLine: {
            lineStyle: {
              with: 0.5,
              color: ["#ccc"],
              opacity: 0.1
            }
          },
          axisLine: {
            show: true
          },
          axisTick: {
            show: true
          }
        },
        series: [
          {
            data: [
              820,
              932,
              901,
              934,
              1290,
              1330,
              1320,
              340,
              932,
              901,
              934,
              1290,
              1330,
              1320
            ],
            type: "line",
            symbol: "none",
            areaStyle: {
              opacity: 0.1
            },
            lineStyle: {
              color: "rgba(234, 118, 71, 1)",
              width: 1
            },
            itemStyle: {
              opacity: 0
            }
          }
        ]
      };
      myChart.setOption(option);
    },
    //画顶部的变化曲线图
    echartLi_write(ele, color, list) {
      let myChart = echarts.init(document.getElementById(ele));
      let option = {
        legend: {
          lineStyle: {
            color: "#fff"
          }
        },
        grid: {
          show: false,
          top: "10%",
          bottom: "10%",
          left: "10%",
          right: "10%"
        },
        xAxis: {
          type: "category",
          show: false,
          data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
        },
        yAxis: {
          type: "value",
          alignTicks: false,
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            show: false
          },
          splitLine: {
            show: false
          }
        },
        series: [
          {
            data: list,
            type: "line",
            smooth: true,
            symbol: "none",
            lineStyle: {
              color: color,
              width: 1
            },
            itemStyle: {
              opacity: 0
            }
          }
        ]
      };
      myChart.setOption(option);
    }
  },
  mounted() {
    this.chart_write("chart1", this.chart1List);
    this.chart_write("main1", this.main1List);
    this.chart_write("main2", this.main2List);
    this.echartLi_write("li_chart1", "#5470c6", this.list1);
    this.echartLi_write("li_chart2", "#92cc76", this.list2);
    this.echartLi_write("li_chart3", "#fac858", this.list2);
    this.echartLi_write("li_chart4", "#ef6666", this.list2);
    this.echart2_write(this.chart1List);
  },
  created() {
    //
  }
};
</script>

样式代码（支持适屏）：

* {
  padding: 0;
  margin: 0;
}

html {
  font-size: 1vh;
}

.content {
  background: #010c43;
  width: 100vw;
  min-width: 1000px;
  padding-bottom: 20px;
  min-height: 100vh;
}

.top {
  height: 6.25rem;
  background: url('../img/echart/top.png') center center no-repeat;
  display: flex;
  justify-content: space-between;
  background-size: 100% 6.25rem;
  line-height: 6.25rem;
  margin: 0 1.25rem;
}
.left_box {
  font-family: PingFangSC-Regular;
  font-size: 1.5rem;
  color: #c8d4ff;
  letter-spacing: 0;
  line-height: 4rem;
}
.center_box {
  font-family: PingFangSC-Semibold;
  font-size: 3rem;
  background-image: -webkit-linear-gradient(
    bottom,
    rgba(236, 250, 243, 1),
    rgba(102, 140, 255, 1)
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  letter-spacing: 0;
}
.right_box {
  font-family: PingFangSC-Regular;
  font-size: 1.5rem;
  color: #c8d4ff;
  letter-spacing: 0;
  line-height: 4rem;
}

.c_box {
  display: flex;
  margin: 2rem 1.5rem;
  justify-content: space-between;
}

.box_li {
  background-image: linear-gradient(135deg, #010f4e 0%, #00093b 100%);
  border: 1px solid rgba(42, 129, 198, 0.5);
  box-shadow: inset 0 0 8px 2px rgba(42, 129, 198, 0.2);
  border-radius: 4px;
  height: 15rem;
  width: 19%;
  position: relative;
}
.li_title {
  font-family: PingFangSC-Medium;
  font-size: 1.86rem;
  color: #c8d4ff;
  letter-spacing: 0;
  position: absolute;
  top: 1.5rem;
  left: 3rem;
}
.li_number {
  font-family: Helvetica-Bold;
  font-size: 3.29rem;
  line-height: 4rem;
  color: #ffffff;
  letter-spacing: 0;
  position: absolute;
  top: 50%;
  margin-top: -2rem;
  left: 3rem;
}
.li_text {
  font-family: PingFangSC-Regular;
  font-size: 1rem;
  color: #c9cbce;
  letter-spacing: 0;
  position: absolute;
  left: 3rem;
  bottom: 2rem;
}
.li_chart {
  width: 50%;
  height: 6rem;
  position: absolute;
  right: 1rem;
  top: 50%;
  margin-top: -3rem;
  background-image: linear-gradient(135deg, #092059 0%, #000f4a 100%);
}
.li_text span:nth-child(2) {
  font-family: DINAlternate-Bold;
  font-size: 1rem;
  color: #ffffff;
  letter-spacing: 0;
  margin-left: 1rem;
}
.li_text span.upArrow {
  background: url('../img/echart/upArrow.png') center center no-repeat;
  background-size: contain;
  background-size: contain;
  width: 2rem;
  height: 1.5rem;
  display: inline-block;
  position: absolute;
}
.li_text span.downArrow {
  background: url('../img/echart/downArrow.png') center center no-repeat;
  background-size: contain;
  width: 2rem;
  height: 1.5rem;
  display: inline-block;
  position: absolute;
}
.b_box {
  margin: 0 1.5rem;
  display: flex;
  justify-content: space-between;
}
.leftBox {
  width: 23.3%;
  height: 100%;
  background: #010c43;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  background-image: linear-gradient(135deg, #010f4e 0%, #00093b 100%);
  border: 1px solid rgba(42, 129, 198, 0.5);
  box-shadow: inset 0 0 8px 2px rgba(42, 129, 198, 0.2);
  border-radius: 4px;
}
.title_box {
  font-family: PingFangSC-Medium;
  font-size: 1.5rem;
  height: 3.71rem;
  width: 100%;
  line-height: 3.71rem;
  color: #e7f1ff;
  letter-spacing: 0;
  background-image: linear-gradient(135deg, #092059 0%, #000f4a 100%);
  border-radius: 0.4rem 0.4rem 0 0;
  text-align: left;
  text-indent: 1.5rem;
}
.conlist_box {
  width: 100%;
  padding-top: 10px;
}
.th_box {
  width: 96%;
  background: #02296e;
  height: 2.86rem;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.th_box > div {
  font-family: PingFangSC-Regular;
  font-size: 1.14rem;
  color: rgba(255, 255, 255, 0.8);
  letter-spacing: 0;
}

.th_box > div:nth-child(1) {
  width: 15%;
  text-align: center;
  padding-left: 0.8rem;
}
.th_box > div:nth-child(2) {
  width: 65%;
  text-align: left;
}
.th_box > div:nth-child(3) {
  width: 20%;
  text-align: center;
  padding-right: 0.8rem;
  min-width: 65px;
}
.td_box {
  width: 96%;
  height: 6.5rem;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.td_box > div {
  font-family: PingFangSC-Regular;
  font-size: 1.14rem;
  color: #cee4ff;
  letter-spacing: 0;
}

.td_box > div:nth-child(1) {
  width: 15%;
  text-align: center;
  padding-left: 1rem;
}
.td_box > div:nth-child(2) {
  width: 65%;
  text-align: left;
}
.td_box > div:nth-child(3) {
  width: 20%;
  text-align: center;
  padding-right: 1rem;
  min-width: 6.5rem;
}
.small_title {
  height: 2.4rem;
  margin-top: -10px;
  font-size: 1rem;
}
.centerBox {
  width: 51%;
}
.centerTop {
  background-image: linear-gradient(135deg, #010f4e 0%, #00093b 100%);
  border: 1px solid rgba(42, 129, 198, 0.5);
  box-shadow: inset 0 0 8px 2px rgba(42, 129, 198, 0.2);
  border-radius: 0.4rem;
}
.centerBottom {
  width: 100%;
  margin-top: 1.5rem;
  display: flex;
  justify-content: space-between;
}
.centerBottombox {
  width: 49%;
  background-image: linear-gradient(135deg, #010f4e 0%, #00093b 100%);
  border: 1px solid rgba(42, 129, 198, 0.5);
  box-shadow: inset 0 0 8px 2px rgba(42, 129, 198, 0.2);
  border-radius: 4px;
}
.echart_box {
  width: 100%;
  height: 40rem;
}
.echart_1,
.echart_2 {
  height: 23.5rem;
  width: 100%;
}

.bottomBox {
  margin: 0 15px;
  display: flex;
  justify-content: space-between;
}
.botbox {
  width: 26.5%;
}
.l1 {
  margin-top: 1.5rem;
  background-image: linear-gradient(135deg, #010f4e 0%, #00093b 100%);
  border: 1px solid rgba(42, 129, 198, 0.5);
  box-shadow: inset 0 0 8px 2px rgba(42, 129, 198, 0.2);
  border-radius: 4px;
}
.l2 {
  margin-top: 1.5rem;
  background-image: linear-gradient(135deg, #010f4e 0%, #00093b 100%);
  border: 1px solid rgba(42, 129, 198, 0.5);
  box-shadow: inset 0 0 8px 2px rgba(42, 129, 198, 0.2);
  border-radius: 4px;
}
.h40 {
  height: 4rem;
}
.li_box {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
}
.liItem {
  width: 45%;
  height: 100px;
  padding-top: 30px;
}
.sl {
  font-family: Helvetica-Bold;
  font-size: 3rem;
  color: #6fd9e8;
  letter-spacing: 0;
  padding-right: 1rem;
}
.or {
  color: rgba(225, 122, 77, 1);
}
.dw {
  font-family: PingFangSC-Regular;
  font-size: 1.5rem;
  color: #7a8ccb;
  letter-spacing: 0;
}
.liItemtitle {
  font-family: PingFangSC-Regular;
  font-size: 1.5rem;
  color: #cee4ff;
  letter-spacing: 0;
  text-align: center;
  margin-top: 1rem;
}

.rbx {
  margin-top: 1.5rem;
  background-image: linear-gradient(135deg, #010f4e 0%, #00093b 100%);
  border: 1px solid rgba(42, 129, 198, 0.5);
  box-shadow: inset 0 0 8px 2px rgba(42, 129, 198, 0.2);
  border-radius: 4px;
}
.centbox {
  width: 45%;
}
.ul_box {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.ul_liItem {
  height: 12rem;
  width: 19%;
  margin-top: 1.5rem;
  background-image: linear-gradient(135deg, #010f4e 0%, #00093b 100%);
  border: 1px solid rgba(42, 129, 198, 0.5);
  box-shadow: inset 0 0 8px 2px rgba(42, 129, 198, 0.2);
  border-radius: 4px;
}
.liItem_title {
  font-family: PingFangSC-Regular;
  font-size: 1.5rem;
  color: #c8d4ff;
  letter-spacing: 0;
  text-align: center;
  padding-top: 2rem;
}
.liItem_body {
  text-align: center;
  padding-top: 2rem;
}
.liItem_body span:nth-child(1) {
  font-family: Helvetica-Bold;
  font-size: 3rem;
  color: #edf7ff;
  letter-spacing: 0;
}
.liItem_body span:nth-child(2) {
  font-family: PingFangSC-Regular;
  font-size: 1.5rem;
  color: #7a8ccb;
  letter-spacing: 0;
  margin-left: 2rem;
}
.chart_4 {
  height: 78.5rem;
  width: 100%;
  background-image: linear-gradient(135deg, #092059 0%, #000f4a 100%);
}
.r1_box {
  display: flex;
  justify-content: space-around;
  padding: 1rem 2rem;
  height: 9.4rem;
}
.r4_box {
  height: 28rem;
  width: 100%;
}
.r3_box {
  height: 19.8rem;
  width: 100%;
}
.sp_title {
  font-family: PingFangSC-Regular;
  font-size: 1.5rem;
  color: #7a8ccb;
  letter-spacing: 0;
  text-align: left;
}
.sp_num {
  font-family: Helvetica-Bold;
  font-size: 3rem;
  color: #edf7ff;
  letter-spacing: 0;
  margin-top: 1.5rem;
  text-align: left;
}

注意： 样式代码中有些不属于本页面的代码，没有剔除。