echarts模板

一、成果样式

 二、代码配置

数据内容

cdata: {
        category: [
          "50",
          "31",
          "42",
          "33",
          "54",
          "55",
          "56",
          "57",
          "58",
          "59",
          "60",
          "11",
          "12",
          "13",
          "14",
          "15",
          "16",
          "17",
          "18",
          "19",
          "20",
          "21",
          "22",
          "23",
        ],
        lineData: [
          18092, 20728, 24045, 28348, 32808, 36097, 39867, 44715, 48444, 50415,
          56061, 62677, 59521, 67560, 18092, 20728, 24045, 28348, 32808, 36097,
          39867, 44715, 48444, 50415, 36097, 39867, 44715, 48444, 50415, 50061,
          32677,
        ],
        xData: [
          "00.00",
          "01.00",
          "02.00",
          "03.00",
          "04.00",
          "05.00",
          "06.00",
          "07.00",
          "08.00",
          "09.00",
          "10.00",
          "11.00",
          "12.00",
        ],
        barData: ["20.000", "40.000", "60.000", "80.000", "100.000"],
        rateData: [],
      },
    };
  },

echarts配置：

<template>
  <div>
    <!-- 年度开工率 -->
    <Echart
      :options="options"
      id="bottomLeftChart"
      height="198px"
      width="100%"
    ></Echart>
  </div>
</template>

<script>
import Echart from "@/common/echart";
export default {
  data() {
    return {
      options: {},
    };
  },
  components: {
    Echart,
  },
  props: {
    cdata: {
      type: Object,
      default: () => ({}),
    },
  },
  watch: {
    cdata: {
      handler(newData) {
        this.options = {
          title: {
            text: "",
          },
          // 图例提示框，默认不显示
          tooltip: {
            //数据项 图形触发
            trigger: "axis",
            backgroundColor: "rgba(255,255,255,0.1)",
            //提示的内容
            axisPointer: {
              type: "shadow",
              label: {
                show: true, //是否显示坐标轴指示器的文本标签
                backgroundColor: "rgba(37, 247, 238, 0.5)",
              },
            },
          },
          legend: {
            type: "plain",
            // 图例内容
            data: [ "计划贯通"],
            //图例内容样式
            textStyle: {
              color: "#B4B4B4",
            },
            top: "5%",
          },
          //gird区域内容显示区域,直角坐标系内绘图网格
          grid: {
            x: "16%",
            width: "76%",
            y: "20%",
          },
          //x轴
          xAxis: {
            type: "category",

            //  minInterval: 1,
            // type:'value',
            // 数据绑定
            data: newData.xData,
            // 坐标轴线
            axisLine: {
              lineStyle: {
                color: "#f6f8fa52",
              },
            },
            // 坐标刻度是否显示
            axisTick: {
              show: false,
            },
            //坐标轴刻度标签的相关设置
            axisLabel: {
              show: true,
              rotate: 45,
              color: "#82B2EB",
              fontWeight: 400,
              fontFamily: " PingFangSC-Regular, PingFang SC",
              fontSize: 12,
            },
          },
          //y轴
          yAxis: {
            max: "100.000",
            min: "0",
            name: "(亿条)",
            nameLocation: "end",
            nameTextStyle: {
              color: "#82B2EB",
              fontFamily: "PingFangSC-Regular, PingFang SC;",
              fontSize: 12,
              fontWeight: 400,
              align: "left",
            },
            //分割线效果
            splitLine: { show: false },
            type: "value",
            // 坐标轴 轴线
            axisLine: {
              lineStyle: {
                color: "#B4B4B4",
              },
            },

            //  坐标轴刻度标签
            axisLabel: {
              formatter: "{value} ",
              color: "#82B2EB",
              fontFamily: "HelveticaNeue",
              fontSize: 12,
            },
          },

          //内容数据
          series: [
          
            {
              name: "计划贯通",
              type: "bar",
              barGap: "-100%",//不同系列的柱间距问题
              barWidth: 10,
              itemStyle: {
                normal: {
                  barBorderRadius: [7, 7, 0, 0],
                  color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    { offset: 0, color: "rgba(37, 247, 238, 1)" },
                    { offset: 0.83, color: "rgba(15, 67, 98, 0.52)" },
                    { offset: 1, color: "rgba(0, 2, 31, 0.35)" },
                  ]),
                },
              },
              z: -12,
              data: newData.category,
            },
          ],
        };
      },
      immediate: true,
      deep: true,
    },
  },
};
</script>