菜单 搜索
首页 前端知识 echart图表合集

echart图表合集

2024-05-26 00:05:00 前端知识 前端哥 847 159 我要收藏

最近做个项目运用大量echarts图表特此记录一下，以备后面不时之需！！！！！

样式图片如下后续可根据自己需要按需修改

echarts--------水球图

 echarts--------柱状图（x轴为两个模块数据版本，柱子顶部自定义背景图加自定义数据）

 echarts-------仪表图（双指针 两个数据）

 echarts-----饼状图（颜色渐变）

 echarts-仪表速度图

 echarts-------------横向进度条

 echarts------环形图表

代码如下

  1，2，3 echarts图表代码

<template>
  <div class="container">
    <!-- 双指针 仪表图 -->
    <div class="top_circle">
      <Echarts
        style="width: 100%; height: 100%"
        id="chart10"
        :options="luLeftOption"
      />
    </div>
    <!-- 柱状图 自定义数据及背景图 -->
    <div class="left_two_box">
      <Echarts
        style="width: 100%; height: 100%"
        id="chart1"
        :options="zhuoption"
      />
    </div>
    <!-- 水球图 -->
    <div class="circle_left">
      <Echarts
        style="width: 100%; height: 100%"
        id="chart1"
        :options="circle_left"
      />
    </div>
  </div>
</template>
      
<script>
//   引入自己封装的echarts 组件  详情见上篇文章封装echarts组件
import Echarts from "@/components/Echarts";
import echarts from "echarts";
// 引入 水球 文件  npm 安装
import "echarts-liquidfill";

export default {
  name: "trackPlayback",
  components: {
    Echarts,
  },
  data() {
    return {
      // 双指针 仪表
      luLeftOption: {},
      //   水球
      circle_left: {},

      // 柱状图
      zhuoption: {},

      // 路况指数数据
      speed_left_data: [
        {
          value: 60,
          name: "pm",
          itemStyle: {
            normal: {
              color: "#F8FD76",
            },
          },
        },
        {
          value: 120,
          name: "am",
          itemStyle: {
            normal: {
              color: "#76EBFD",
            },
          },
        },
      ],
    };
  },
  watch: {},
  mounted() {
    this.get_option();
    this.getZhu();
    this.getLeft();
  },
  destroyed() {},
  methods: {
    // 水球图表
    get_option() {
      setTimeout(() => {}, 1000);
      this.circle_left = {
        backgroundColor: "", //设置无背景色
        title: {
          // 标题
          // text: "补贴资金剩余",
          // textStyle: {
          //   // 标题的样式
          //   color: "#888", // 字体颜色
          //   fontFamily: "Microsoft YaHei", // 字体
          //   fontSize: 24,
          //   fontWeight: "400",
          //   align: "center", // 文字的水平方式
          //   baseline: "middle",
          //   position: "inside",
          //   verticalAlign: "middle", // 文字的垂直方式
          // },
          // left: "center", // 定位
          // top: "20%",
        },
        series: [
          {
            type: "liquidFill",
            radius: "95%",
            waveAnimation: true,
            backgroundStyle: "",
            data: [
              {
                value: 0.5,
                direction: "left",
                itemStyle: {
                  normal: {
                    color: "#52DBB3",
                  },
                },
              },
            ],
            outline: {
              // show: true , //是否显示轮廓 布尔值
              borderDistance: 0, // 外部轮廓与图表的距离 数字
              itemStyle: {
                borderColor: "#18AFB8", // 边框的颜色
                borderWidth: 2, // 边框的宽度
                // shadowBlur: 5 , //外部轮廓的阴影范围 一旦设置了内外都有阴影
                // shadowColor: '#000' //外部轮廓的阴影颜色
              },
            },
            itemStyle: {
              opacity: 1, // 波浪的透明度
              shadowBlur: 0, // 波浪的阴影范围
            },
            // backgroundStyle: {
            //   color: rgba, // 图表的背景颜色
            // },
            label: {
              // 数据展示样式
              show: true,
              color: "#fff",
              insideColor: "#fff",
              fontSize: 26,
              fontWeight: 800,
              align: "center",
              baseline: "center",
              position: "center",
              normal: {
                formatter: "{total|" + "50%" + "}" + "\n" + "{active|上行隧道}", //显示在水球图中间的文字，可以是字符串，可以是占位符，也可以是一个函数。
                //如果使用{a}\n{b}\nValue: {c} ，a代表系列名称，b代表数据名称，c代表数据值。
                textStyle: {
                  color: "#DDDDDD", //默认背景下的文字颜色
                  insideColor: "#DDDDDD", //水波背景下的文字颜色
                  // fontsize: 14, //字体大小
                },
                rich: {
                  total: {
                    fontSize: 26,
                    color: "#fff",
                    fontFamily: "Source Han Sans CN Heavy Bold",
                  },

                  active: {
                    fontFamily: "PingFang SC Medium",
                    fontSize: 14,
                  },
                },
              },
            },
          },
        ],
      };

      this.circle_right = {
        backgroundColor: "", //设置无背景色
        title: {
          // 标题
          // text: "补贴资金剩余",
          // textStyle: {
          //   // 标题的样式
          //   color: "#888", // 字体颜色
          //   fontFamily: "Microsoft YaHei", // 字体
          //   fontSize: 24,
          //   fontWeight: "400",
          //   align: "center", // 文字的水平方式
          //   baseline: "middle",
          //   position: "inside",
          //   verticalAlign: "middle", // 文字的垂直方式
          // },
          // left: "center", // 定位
          // top: "20%",
        },
        series: [
          {
            type: "liquidFill",
            radius: "95%",
            backgroundStyle: "",
            waveAnimation: true,
            data: [
              {
                value: 0.3,
                direction: "left",
                itemStyle: {
                  normal: {
                    color: "#52DBB3",
                  },
                },
              },
            ],
            outline: {
              // show: true , //是否显示轮廓 布尔值
              borderDistance: 0, // 外部轮廓与图表的距离 数字
              itemStyle: {
                borderColor: "#18AFB8", // 边框的颜色
                borderWidth: 2, // 边框的宽度
                // shadowBlur: 5 , //外部轮廓的阴影范围 一旦设置了内外都有阴影
                // shadowColor: '#000' //外部轮廓的阴影颜色
              },
            },
            itemStyle: {
              opacity: 1, // 波浪的透明度
              shadowBlur: 0, // 波浪的阴影范围
            },
            // backgroundStyle: {
            //   color: rgba, // 图表的背景颜色
            // },

            // label: {
            //     show: true,
            //     fontSize: 14,
            //     position: ['50%', '50%'],
            //     color: 'rgba(254, 253, 244, 1.00)',
            //     insideColor: 'rgba(244, 120, 34, 1.00)',
            //     formatter: '{total|' + '4' + '}' + '{total2|' + '/10' + '}' + '\n\r\n\r' + '{active|每日得分}',
            //     rich: {
            //         total: {
            //             fontSize: 37,
            //             fontFamily: "微软雅黑",
            //         }, total2: {
            //             fontSize: 25,
            //             fontFamily: "微软雅黑",
            //         },
            //         active: {
            //             fontFamily: "微软雅黑",
            //             fontSize: 14,
            //         },
            //     }
            // },

            label: {
              // 数据展示样式
              show: true,
              color: "#fff",
              insideColor: "#fff",
              fontSize: 26,
              fontWeight: 800,
              align: "center",
              baseline: "center",
              position: "center",
              normal: {
                formatter: "{total|" + "23%" + "}" + "\n" + "{active|下行隧道}", //显示在水球图中间的文字，可以是字符串，可以是占位符，也可以是一个函数。
                //如果使用{a}\n{b}\nValue: {c} ，a代表系列名称，b代表数据名称，c代表数据值。
                textStyle: {
                  color: "#DDDDDD", //默认背景下的文字颜色
                  insideColor: "#DDDDDD", //水波背景下的文字颜色
                  // fontsize: 14, //字体大小
                },
                rich: {
                  total: {
                    fontSize: 26,
                    color: "#fff",
                    fontFamily: "Source Han Sans CN Heavy Bold",
                  },

                  active: {
                    fontFamily: "PingFang SC Medium",
                    fontSize: 14,
                  },
                },
              },
            },
          },
        ],
      };
    },
    // 柱状图
    getZhu() {
      const COLOR = [
        ["#F3CC44", "#995700"],
        ["#44A3F3", "#005099"],
        ["#71F8D6", "#55C399"],
      ];
      let bai = ["12", "34", "12", "54", "85", "26"];

      this.zhuoption = {
        backgroundColor: "",

        title: {
          show: false,
          text: "",
        },
        // tooltip: {
        //   trigger: "axis",
        // },
        grid: {
          top: "20",
          right: "10",
          left: "10",
          bottom: "5",
          containLabel: true,
        },
        dataGroupId: "",
        animationDurationUpdate: 500,
        xAxis: [
          {
            //坐标轴线
            axisLabel: {
              interval: 0,
              align: "center",
              rotate: "40",
              margin: "20",
              color: "#BFBFBF",
            },
            axisLine: {
              //y轴线的配置
              // show: true, //是否展示
              lineStyle: {
                color: "rgb(255, 255, 255,0.15)", //y轴线的颜色（若只设置了y轴线的颜色，未设置y轴文字的颜色，则y轴文字会默认跟设置的y轴线颜色一致）
              },
            },
            //坐标轴刻度相关设置
            axisTick: {
              show: false,
              interval: 0,
            },
            triggerEvent: true,
            data: ["", "", "", "", "", ""],
          },
          {
            type: "category",
            data: [
              {
                value: "上行隧道",
                textStyle: {
                  fontSize: 15,
                  lineHeight: 50,
                  // top:20,
                  color: "#fafafa",
                },
              },
              {
                value: "下行隧道",
                textStyle: {
                  fontSize: 15,
                  color: "#fafafa",
                  lineHeight: 50,
                  // lineHeight: 70,
                },
              },
            ],
            position: "bottom",
            // axisTick: {
            //   length: 50,
            // },
            // splitArea: {
            //   show: true,
            //   areaStyle: {
            //     color: ["rgba(255,255,255,0.5)", "rgba(200,200,200,0.5)"],
            //   },
            // },
          },
        ],
        yAxis: {
          type: "value",
          max: 300, //最大值
          min: 0, //最小值
          interval: 50, //间隔
          axisLine: {
            //y轴线的配置
            show: true, //是否展示
            lineStyle: {
              color: "rgb(255, 255, 255,0.15)", //y轴线的颜色（若只设置了y轴线的颜色，未设置y轴文字的颜色，则y轴文字会默认跟设置的y轴线颜色一致）
            },
          },
          axisTick: {
            show: false,
          },
          //坐标轴刻度标签的相关设置
          splitLine: {
            show: true,
            lineStyle: {
              color: "rgb(255, 255, 255,0.15)",
              width: 1,
              type: "solid",
            },
          },
          axisLabel: {
            textStyle: {
              color: "#BFBFBF",
              //Y轴内容文字颜色
            },
          },
        },
        series: [
          {
            name: "",
            type: "bar",
            label: {
              normal: {
                show: false,
                // formatter: "{c}%",
                // formatter: function (param) {
                //   let str = bai[param.dataIndex];
                //   return str;
                // },
                position: "top",
                textStyle: {
                  color: "#D0CECE",
                  fontSize: 10,
                },
              },
            },
            barWidth: 26,
            itemStyle: {
              color: function (params) {
                let index = params.dataIndex;
                if (params.dataIndex >= COLOR.length) {
                  index = params.dataIndex - COLOR.length;
                }
                return new echarts.graphic.LinearGradient(1, 0, 0, 0, [
                  {
                    offset: 0,
                    color: COLOR[index][0],
                  },
                  {
                    offset: 1,
                    color: COLOR[index][1],
                  },
                ]);
              },
            },
            //插入背景图
            markPoint: {
              symbol: "image://" + require("@/assets/images/qipao.png"),
              itemStyle: {
                normal: {
                  label: {
                    show: true,
                    position: [2, 7],
                    fontSize: 10,
                    color: "#D0CECE",
                    formatter: function (param) {
                      let str = bai[param.dataIndex] + "%";
                      return str;
                    },
                  },
                },
              },
              symbolSize: 25,
              symbolOffset: [0, -25],
              data: [
                { name: "", coord: [0, 54] },
                { name: "", coord: [1, 234] },
                { name: "", coord: [2, 123] },
                { name: "", coord: [3, 241] },
                { name: "", coord: [4, 53] },
                { name: "", coord: [5, 134] },
              ],
            },
            data: [
              {
                value: 54,
              },
              {
                value: 234,
              },
              {
                value: 123,
              },
              {
                value: 241,
              },
              {
                value: 53,
              },
              {
                value: 134,
              },
            ],
          },
        ],
      };
    },
    // 速度
    getLeft() {
      this.luLeftOption = {
        backgroundColor: "",
        grid: {
          right: "0%",
          left: "0%",
          top: "0%",
          bottom: "0%",
          // borderWidth: 1,
        },
        xAxis: {
          show: false,
          type: "category",
          data: ["Mon"],
        },
        yAxis: {
          show: false,
          type: "value",
        },
        series: [
          {
            name: "AM",
            type: "gauge",
            radius: "100%",
            min: 0,
            max: 360,
            splitNumber: 5,
            startAngle: 180,
            endAngle: -179.9,
            zlevel: 0,

            axisLine: {
              // 坐标轴线
              lineStyle: {
                // 属性lineStyle控制线条样式
                width: 16, // 仪表盘宽度
                color: [
                  [0.2, "#EC7777"],
                  [0.4, "#F1C176"],
                  [0.6, "#E08E42"],
                  [0.8, "#5CC314"],
                  [1, "#63C617"],
                ],
              },
            },

            data: this.speed_left_data,
            legend: {
              padding: 0,
              margin: 0,
            },
            pointer: {
              show: true,
              length: "60%",
              radius: "50%",
              width: 3, //指针粗细
            },
            title: {
              // 仪表盘标题。

              show: false, // 是否显示标题,默认 true。
            },
            axisTick: {
              show: false,
              splitNumber: 5,
              lineStyle: {
                width: 2,
              },
              length: -8,
            },
            //刻度样式
            splitLine: {
              show: false,
              length: -20,
              lineStyle: {
                color: "red", //用颜色渐变函数不起作用
              },
            },

            label: {
              show: false,
              position: "center",
            },
            emphasis: {
              //饼图中间显示配置
              label: {
                show: false,
                fontSize: "10",
                fontWeight: "bold",
                formatter: "{b}: {d}",
              },
            },

            //分隔线样式
            axisLabel: {
              show: false,
              distance: -20,
            },
          },
        ],
      };

    
    },
  },
};
</script>
      
<style lang="scss">
</style>
      
<style lang="scss" scoped>
</style>

4，5图表代码

<template>
  <div class="container">
    <div class="three_bing">
      <!-- 渐变 饼状图 -->
      <Echarts
        style="width: 100%; height: 100%"
        id="chart1"
        :options="untreatedOption"
      />
    </div>

    <!-- 半圆图表 -->

    <div class="top_one">
      <Echarts
        style="width: 100%; height: 100%"
        id="chart1"
        :options="speedLeftOption"
      />
    </div>

    <!-- 3/4 仪表 -->

    <div class="top_one">
      <Echarts
        style="width: 100%; height: 100%"
        id="chart1"
        :options="speedLeftOptionbot"
      />
    </div>
  </div>
</template>
        
  <script>
import Echarts from "@/components/Echarts";
import echarts from "echarts";

export default {
  name: "trackPlayback",
  components: {
    Echarts,
  },
  data() {
    return {
      speedLeftOption: {},
      speedLeftOptionbot: {},
      untreatedOption: {},
    };
  },

  mounted() {
    
    this.getEcharts();

    this.getSpeedEcharts();
    
    this.getspeedbotone();
  },
  destroyed() {},
  methods: {
    
    // 饼图
    getEcharts() {
      //  未处理

      //   饼图渐变
      let color = [
        {
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [
            {
              color: "#0056FF",
              offset: 0,
            },
            {
              color: "#3D7FFF",
              offset: 1,
            },
          ],
        },
        {
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [
            {
              color: "#6DD400",
              offset: 0,
            },
            {
              color: "#44D7B6",
              offset: 1,
            },
          ],
        },
        {
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [
            {
              color: "#FFD012",
              offset: 0,
            },
            {
              color: "#FFD012",
              offset: 1,
            },
          ],
        },
        {
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [
            {
              color: "#2DE1FD",
              offset: 0,
            },
            {
              color: "#0E5FFF",
              offset: 1,
            },
          ],
        },
        {
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [
            {
              color: "#026DB2",
              offset: 0,
            },
            {
              color: "#12FEE0",
              offset: 1,
            },
          ],
        },

        {
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [
            {
              color: "#5AD8A6",
              offset: 0,
            },
            {
              color: "#269A99",
              offset: 1,
            },
          ],
        },

        {
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [
            {
              color: "#5283FF",
              offset: 0,
            },
            {
              color: "#380DC9",
              offset: 1,
            },
          ],
        },
      ];

      let data1 = [
        { value: 1048, name: "大货车" },
        { value: 735, name: "中货车" },
        { value: 580, name: "小货车" },
        { value: 484, name: "大巴车" },
        { value: 300, name: "中巴车" },
        { value: 600, name: "小客车" },
        { value: 123, name: "危化品车" },
      ];
      this.untreatedOption = {
        backgroundColor: "",
        color,
        // tooltip: {
        //   // trigger: "item",
        //   formatter: "{b} : {c} ({d}%)",
        // },
        series: [
          {
            type: "pie",
            center: ["50%", "50%"], //圆心的位置
            top: "0%", //单单指的饼图距离上面的距离，top越大饼图越小
            left: "0%", //单单指的饼图距离左面的距离，会改变饼图的大小
            radius: ["0%", "80%"], //实心圆[内半径=0，外半径] 外半径越大，圆越大
            clockwise: true, //顺时针排列
            startAngle: 90, //起始角度 影响不大
            //roseType:"", // 实心圆 不能出现roseType这个属性
            label: {
              show: false, //false不显示饼图上的标签
              // position: 'outside', //inside（在饼图上显示）,outside(默认就会出现引导线) center
              // formatter: '{b}:{c}',
            },
            //只有设置了label:show=ture;position=outside 设置labelLine才会有效
            labelLine: {
              show: false, //显示引导线
              length: 30, //连接饼图第1段线条的长度 length length2 不写自适应
              length2: 30, //链接饼图第2段线条长度
              smooth: false, //是否光滑连接线
            },
            itemStyle: {
              //每个扇形的设置
              borderColor: "transparent", //扇形边框颜色
              borderWidth: 5, //扇形边框大小 要先给borderColor颜色 设置borderWidth才会有效果
            },
            data: data1,
            // emphasis: {
            //   //启用鼠标放上去放大效果，这个挺好的
            //   scale: false,
            //   scaleSize: 10,
            //   itemStyle: {
            //     shadowBlur: 10,
            //     shadowOffsetX: 0,
            //     shadowColor: "rgba(0, 0, 0, 0.5)",
            //   },
            // },
            silent: "ture", //图形是否不响应和触发鼠标事件，默认为 false，即响应和触发鼠标事件。
            emphasis: {
              //使用emphasis
              disable: false,
              scale: false, //不缩放
              scaleSize: 0, //为了防止失效直接设置未0
            },
          },
        ],
      };
    },

    // 半圆速度
    getSpeedEcharts() {
      let name = ["实际", "目标"];
      let value = [30, 50];
      let colorArr = ["#1962FF", "#19FFC4"];
      let seriesData = [];
      name.forEach((v, i) => {
        seriesData.push({
          name: name[i],
          value: value[i],
          itemStyle: {
            color: colorArr[i],
          },
        });
      });
      this.speedLeftOption = {
        backgroundColor: "",
        // tooltip: {
        //   show: true,
        //   trigger: "item",
        //   axisPointer: {
        //     type: "line",
        //   },
        //   formatter: "{b} : {c}",
        //   textStyle: {
        //     fontSize: 14,
        //   },
        //   borderWidth: 0,
        // },
        series: [
          {
            name: "刻度",
            type: "gauge",
            center: ["50%", "50%"],
            radius: "90%",
            min: 0, //最小刻度
            max: 100, //最大刻度
            splitNumber: 10, //刻度数量
            startAngle: 180,
            endAngle: 0,
            axisLine: {
              show: true,
              lineStyle: {
                width: 1,
                color: [[1, "rgba(0,0,0,0)"]],
              },
            }, //仪表盘轴线
            axisLabel: {
              show: true,
              color: "rgba(255,255,255,0.5)",
              fontSize: 6,
              distance: 0,
            }, //刻度标签。
            axisTick: {
              show: true,
              splitNumber: 5,
              lineStyle: {
                color: "#567FFE",
                width: 1,
                // length:10
              },
              length: 10,
            }, //刻度样式
            splitLine: {
              show: true,
              length: 16,
              lineStyle: {
                color: "#f5f7f9",
                width: 1,
              },
            }, //分隔线样式
          },
          {
            type: "gauge",
            radius: "100%",
            center: ["50%", "50%"],
            min: 0, //最小刻度
            max: 100, //最大刻度
            splitNumber: 0, //刻度数量
            startAngle: 180,
            endAngle: 0,
            axisLine: {
              show: true,
              lineStyle: {
                width: 8,
                color: [
                  [
                    1,
                    new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                      {
                        offset: 0,
                        color: "#2AD3FE ",
                      },
                      {
                        offset: 1,
                        color: "#5F6DFD",
                      },
                    ]),
                  ],
                ],
              },
            },
            //分隔线样式。
            splitLine: {
              show: false,
            },
            axisLabel: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            pointer: {
              show: true,
              length: "80%",
              width: "1%",
            },
            title: {
              show: false,
            },
            detail: {
              show: true,
              offsetCenter: [0, 10],
              color: "#fff",
              formatter: function (params) {
                return "平均速度 km/h";
              },
              textStyle: {
                fontSize: 10,
                fontFamily: "PingFang SC Light",
              },
            },
            data: seriesData,
          },
        ],
      };
    },

    // 大圆速度
    getspeedbotone() {
      let name = ["实际", "目标"];
      let value = [30, 50];
      let colorArr = ["#1962FF", "#19FFC4"];
      let seriesData = [];
      name.forEach((v, i) => {
        seriesData.push({
          name: name[i],
          value: value[i],
          itemStyle: {
            color: colorArr[i],
          },
        });
      });
      this.speedLeftOptionbot = {
        backgroundColor: "",
        // tooltip: {
        //   show: true,
        //   trigger: "item",
        //   axisPointer: {
        //     type: "line",
        //   },
        //   formatter: "{b} : {c}",
        //   textStyle: {
        //     fontSize: 14,
        //   },
        //   borderWidth: 0,
        // },
        series: [
          {
            name: "刻度",
            type: "gauge",
            center: ["50%", "50%"],
            radius: "90%",
            min: 0, //最小刻度
            max: 100, //最大刻度
            splitNumber: 10, //刻度数量
            // startAngle: 180,
            // endAngle: 0,
            axisLine: {
              show: true,
              lineStyle: {
                width: 1,
                color: [[1, "rgba(0,0,0,0)"]],
              },
            }, //仪表盘轴线
            axisLabel: {
              show: true,
              color: "rgba(255,255,255,0.5)",
              fontSize: 6,
              distance: 0,
            }, //刻度标签。
            axisTick: {
              show: true,
              splitNumber: 5,
              lineStyle: {
                color: "#567FFE",
                width: 1,
                // length:10
              },
              length: 10,
            }, //刻度样式
            splitLine: {
              show: true,
              length: 16,
              lineStyle: {
                color: "#f5f7f9",
                width: 1,
              },
            }, //分隔线样式
          },
          {
            type: "gauge",
            radius: "100%",
            center: ["50%", "50%"],
            min: 0, //最小刻度
            max: 100, //最大刻度
            splitNumber: 0, //刻度数量
            // startAngle: 180,
            // endAngle: 0,
            axisLine: {
              show: true,
              lineStyle: {
                width: 8,
                color: [
                  [
                    1,
                    new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                      {
                        offset: 0,
                        color: "#2AD3FE ",
                      },
                      {
                        offset: 1,
                        color: "#5F6DFD",
                      },
                    ]),
                  ],
                ],
              },
            },
            //分隔线样式。
            splitLine: {
              show: false,
            },
            axisLabel: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            pointer: {
              show: true,
              length: "80%",
              width: "1%",
            },
            title: {
              show: false,
            },
            detail: {
              show: true,
              offsetCenter: [0, 10],
              color: "#fff",
              formatter: function (params) {
                return "平均速度 km/h";
              },
              textStyle: {
                fontSize: 10,
                fontFamily: "PingFang SC Light",
              },
            },
            data: seriesData,
          },
        ],
      };
    },

 
  },
};
</script>

5.6图表代码

 

<template>
  <div class="container">
    <!-- 横向进度条 -->
    <div class="one_echarts">
      <Echarts
        style="width: 100%; height: 100%"
        id="chart1"
        :options="deviceTypeOption"
      />
    </div>
    <!-- 环形 饼图 -->
    <div class="three_bing">
      <Echarts
        style="width: 100%; height: 100%"
        id="chart1"
        :options="untreatedOption"
      />
    </div>
  </div>
</template>
      
      <script>
import Echarts from "@/components/Echarts";
import echarts from "echarts";

export default {
  name: "trackPlayback",
  components: {
    Echarts,
  },
  data() {
    return {

      deviceTypeOption: {},

      untreatedOption: {},

    };
  },
  watch: {},
  mounted() {
    
    this.getEcharts();
    this.getUnEcharts();
    this.getType();
    this.getDeviceData();
  },
  destroyed() {},
  destroyed() {},
  methods: {

    getType() {
      // 设备类型
      const datas = [
        { name: "照明", value: "264.9" },
        { name: "风机", value: "241.5" },
        { name: "车指", value: "312.5" },
        { name: "信号灯", value: "447.9" },
        { name: "可变信息标志", value: "264.9" },
        { name: "智慧基站", value: "241.5" },
        { name: "CO/VI", value: "312.5" },
        { name: "风速风向", value: "447.9" },
        { name: "亮度检测器", value: "264.9" },
        { name: "声光报警器", value: "241.5" },
        { name: "智能诱导灯", value: "312.5" },
      ];
      const myColor = ["#2BBCFE"].reverse();
      const xData = datas.map((item) => item.name);
      const yData = datas.map((item) => item.value);
      const max = Math.ceil(Math.max(...yData) * 1.2);
      const maxData = [max, max, max, max, max, max, max, max, max, max, max];
      this.deviceTypeOption = {
        backgroundColor: "",
        grid: {
          left: "35%",
          right: "0%",
          bottom: "0%",
          top: "0%",
          containLabel: false,
        },

        tooltip: {
          trigger: "axis",
          backgroundColor: "#364254",
          textStyle: {
            color: "#DDDDDD",
            fontSize: "12",
            fontFamily: "Source Han Sans CN Regular",
          },
          formatter: (params) => {
            let dataStr = ` 
                <div style="rgba(54,66,84,0.9)">
                    <div style="padding-left:10px;padding-top:6px;padding-right:11px">设备总数:4</div>
                    <div style="padding-bottom:4px;padding-left:10px;paddint-top:2px">在线:2</div>
                </div>
              `;
            return dataStr;
          },
        },
        xAxis: [
          {
            show: false,
          },
          {
            show: false,
          },
        ],
        yAxis: [
          {
            show: false,
            inverse: true,
            data: yData,
          },
          {
            show: true,
            data: yData,
            offset: -45,
            position: "right",
            axisLabel: {
              show: false,
              //   textStyle: {
              //     // show: true,
              //     fontFamily: "PingFangSC-Medium, PingFang SC",
              //     color: "red",
              //     // fontSize: "45",
              //   },

              // lineHeight: 0,
              // verticalAlign: "bottom",
              // fontSize: 15,
              // color: "#4bf3f9",
              // formatter: "{value}亿",
            },
            axisLine: {
              show: false,
            },
            splitLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
          },
        ],
        series: [
          {
            name: "进度",
            show: true,
            type: "bar",
            barGap: "-100%",
            xAxisIndex: 1,
            barWidth: 4,
            itemStyle: {
              borderRadius: 4,
              color: (params) => {
                var num = myColor.length;
                return {
                  type: "linear",
                  x: 0,
                  y: 0,
                  x2: 1,
                  y2: 1,
                  colorStops: [
                    {
                      offset: 0,
                      color: "#0F1F45",
                    },
                    {
                      offset: 1,
                      color: myColor[params.dataIndex % num],
                    },
                  ],
                };
              },
            },
            label: {
              show: false,
            },
            // max: 0,
            labelLine: {
              show: false,
            },
            z: 2,
            data: yData,
            animationDelay: 1000,
            animationDuration: 1000,
          },
          {
            name: "外圆",
            type: "scatter",
            emphasis: {
              scale: false,
            },
            xAxisIndex: 1,
            symbolSize: 10,
            itemStyle: {
              // color: (params) => {
              //   var num = myColor.length;
              //   return myColor[params.dataIndex % num];
              // },
              color: "white",
              shadowColor: "rgba(255, 255, 255, 0.5)",
              shadowBlur: 5,
              borderWidth: 1,
              opacity: 1,
            },
            // label: {
            //   show: true,
            //   verticalAlign: "bottom",
            //   lineHeight: 38,
            //   formatter: function (data) {
            //     return yData[data.dataIndex] + "亿";
            //   },
            //   fontSize: 20,
            //   color: "#4bf3f9",
            // },
            z: 2,
            data: yData,
            animationDelay: 1700,
            animationDuration: 1000,
          },
          {
            name: "年份",
            z: 1,
            show: true,
            type: "bar",
            xAxisIndex: 1,
            barGap: "-100%",
            barWidth: 4,
            itemStyle: {
              borderRadius: 4,
              color: "rgba(13, 55, 78, 1)",
            },
            label: {
              show: true,
              verticalAlign: "middle",
              position: "left",
              fontSize: 14,
              color: "#fff",
              formatter: function (data) {
                return xData[data.dataIndex] + "：";
              },
            },
            data: maxData,
          },
        ],
      };
    },

    getUnEcharts() {
      //  设备故障
      let colorList = ["#B795FE", "#19FFC4", "#19E8FF", "#22FF19", "#1942FF"];
      this.deviceFaultOption = {
        backgroundColor: "",
        legend: {
          icon: "circle",
          top: "0%",
          right: "0%",
          itemWidth: 6,
          itemGap: 5,
          textStyle: {
            color: "#ABB1BD",
            padding: [3, 4, 0, 0],
          },
        },
        // tooltip: {
        //   trigger: "axis",
        // },
        tooltip: {
          trigger: "axis",
          backgroundColor: "#364254",
          textStyle: {
            color: "#DDDDDD",
            fontSize: "12",
            fontFamily: "Source Han Sans CN Regular",
          },
          formatter: (params) => {
            let dataStr = ` 
                <div style="rgba(54,66,84,0.9)">
                    <div style="padding-left:13px;padding-top:6px;padding-right:74px">2020/${params[0].axisValue}</div>
                    <div style="padding-top:7px"><span style="border-radius:50%;display:inline-block;margin-right:5px;margin-left:13px;width:7px;height:7px;background-color:${params[0].color};"></span>${params[0].seriesName}<span style="margin-left:26px">${params[0].value}</span></div>
                    <div style="padding-top:7px"><span style="border-radius:50%;display:inline-block;margin-right:5px;margin-left:13px;width:7px;height:7px;background-color:${params[1].color};"></span>${params[1].seriesName}<span style="margin-left:26px">${params[1].value}</span></div>
                    <div style="padding-top:7px"><span style="border-radius:50%;display:inline-block;margin-right:5px;margin-left:13px;width:7px;height:7px;background-color:${params[2].color};"></span>${params[2].seriesName}<span style="margin-left:14px">${params[2].value}</span></div>
                    <div style="padding-top:7px"><span style="border-radius:50%;display:inline-block;margin-right:5px;margin-left:13px;width:7px;height:7px;background-color:${params[3].color};"></span>${params[3].seriesName}<span style="margin-left:14px">${params[3].value}</span></div>
                    <div style="padding-bottom:6px;padding-top:7px"><span style="border-radius:50%;display:inline-block;margin-right:5px;margin-left:13px;width:7px;height:7px;background-color:${params[4].color};"></span>${params[4].seriesName}<span style="margin-left:26px">${params[4].value}</span></div>
                </div>
              `;
            return dataStr;
          },
        },

        grid: {
          top: "12%",
          left: "10%",
          bottom: "12%",
          right: "5%",
        },
        xAxis: [
          {
            type: "category",
            data: [
              "1月",
              "2月",
              "3月",
              "4月",
              "5月",
              "6月",
              "7月",
              "8月",
              "9月",
              "10月",
              "11月",
              "12月",
            ],

            axisLine: {
              show: true,

              lineStyle: {
                color: "rgba(255,255,255,0.15)",
              },
            },

            axisTick: {
              show: true,
            },
            axisLabel: {
              interval: 0,
              textStyle: {
                color: "rgba(255,255,255,0.15)",
              },
              // 默认x轴字体大小
              fontSize: 12,
              // margin:文字到x轴的距离
              margin: 10,
            },
            axisPointer: {
              label: {
                // padding: [11, 5, 7],
                padding: [0, 0, 0, 0],
                // 这里的margin和axisLabel的margin要一致!
                margin: 10,
                // 移入时的字体大小
                fontSize: 12,
                backgroundColor: "rgba(0,0,0,0)",
              },
            },
            boundaryGap: false,
          },
        ],
        yAxis: [
          {
            // name: "单位/件",
            axisTick: {
              show: false,
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: "rgba(255,255,255,0.15)",
              },
            },
            axisLabel: {
              textStyle: {
                color: "rgba(255,255,255,0.15)",
              },
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: "rgba(219,225,255,0.15)",
              },
            },
          },
        ],
        series: [
          {
            name: "监控系统",
            type: "line",
            data: [3300, 3200, 457, 30, 60, 2466, 563, 200, 553, 80, 656, 654],
            symbolSize: 1,
            symbol: "circle",
            // smooth: true,
            showSymbol: true, //是否默认展示圆点
            symbol: "circle", //设定为实心点
            symbolSize: 3, //设定实心点的大小
            lineStyle: {
              width: 2,
              color: new echarts.graphic.LinearGradient(1, 1, 0, 0, [
                {
                  offset: 0,
                  color: "#3696FF",
                },
                {
                  offset: 1,
                  color: "#1962FF",
                },
              ]),
              shadowColor: "rgba(144, 255, 198, .3)",
              shadowBlur: 5,
              shadowOffsetY: 5,
            },
            itemStyle: {
              normal: {
                color: colorList[0],
                borderColor: colorList[0],
              },
            },
          },
          {
            name: "收费系统",
            type: "line",
            data: [2800, 2700, 455, 30, 60, 756, 50, 200, 2425, 346, 150, 364],
            symbolSize: 1,
            symbol: "circle",
            // smooth: true,
            showSymbol: true, //是否默认展示圆点
            symbol: "circle", //设定为实心点
            symbolSize: 3, //设定实心点的大小
            lineStyle: {
              width: 2,
              color: new echarts.graphic.LinearGradient(1, 1, 0, 0, [
                {
                  offset: 0,
                  color: "#36FFE4",
                },
                {
                  offset: 1,
                  color: "#19FFC4",
                },
              ]),
              shadowColor: "rgba(105, 188, 252,.3)",
              shadowBlur: 5,
              shadowOffsetY: 5,
            },
            itemStyle: {
              normal: {
                color: colorList[1],
                borderColor: colorList[1],
              },
            },
          },
          {
            name: "供配电系统",
            type: "line",
            data: [
              2645, 845, 1345, 2344, 60, 2341, 50, 513, 645, 654, 3500, 3000,
            ],
            symbolSize: 1,
            symbol: "circle",
            // smooth: true,
            showSymbol: true, //是否默认展示圆点
            symbol: "circle", //设定为实心点
            symbolSize: 3, //设定实心点的大小
            lineStyle: {
              width: 2,
              color: new echarts.graphic.LinearGradient(1, 1, 0, 0, [
                {
                  offset: 0,
                  color: "#36D9FF ",
                },
                {
                  offset: 1,
                  color: "#19E8FF",
                },
              ]),
              shadowColor: "rgb(252, 147, 126,.3)",
              shadowBlur: 2,
              shadowOffsetY: 2,
            },
            itemStyle: {
              normal: {
                color: colorList[2],
                borderColor: colorList[2],
              },
            },
          },
          {
            name: "计算机系统",
            type: "line",
            data: [
              215, 804, 1500, 301, 60, 1700, 800, 200, 3500, 80, 150, 1200,
            ],
            symbolSize: 1,
            symbol: "circle",
            // smooth: true,
            showSymbol: true, //是否默认展示圆点
            symbol: "circle", //设定为实心点
            symbolSize: 3, //设定实心点的大小
            lineStyle: {
              width: 2,
              color: new echarts.graphic.LinearGradient(1, 1, 0, 0, [
                {
                  offset: 0,
                  color: "#36FF4A",
                },
                {
                  offset: 1,
                  color: "#22FF19",
                },
              ]),
              shadowColor: "rgba(115, 87, 255, .1)",
              shadowBlur: 5,
              shadowOffsetY: 5,
            },
            itemStyle: {
              normal: {
                color: colorList[3],
                borderColor: colorList[3],
              },
            },
          },
          {
            name: "通信系统",
            type: "line",
            data: [200, 800, 1500, 30, 60, 3500, 50, 200, 2000, 80, 150, 3000],
            symbolSize: 1,
            symbol: "circle",
            // smooth: true,  //  是否平滑
            showSymbol: true, //是否默认展示圆点
            symbol: "circle", //设定为实心点
            symbolSize: 3, //设定实心点的大小

            lineStyle: {
              width: 2,
              color: new echarts.graphic.LinearGradient(1, 1, 0, 0, [
                {
                  offset: 0,
                  color: "#B795FE",
                },
                {
                  offset: 1,
                  color: "#1942FF",
                },
              ]),
              shadowColor: "rgba(255, 235, 134, .5)",
              shadowBlur: 5,
              shadowOffsetY: 5,
            },
            itemStyle: {
              normal: {
                color: colorList[4],
                borderColor: colorList[4],
              },
            },
          },
        ],
      };
    },

  },
};
</script>

转载请注明出处或者链接地址：https://www.qianduange.cn//article/9514.html
标签
上一篇：HTML基本结构及基本标签
评论
相关文章

前端哥

前端哥

发布的文章

html js mysql登录注册

2024-06-01 00:06:00

html注册功能

2024-06-01 00:06:49

yolov8训练数据集之labelme的json文件转txt

2024-05-31 20:05:07

阿里云物联网平台 | 透传与ICA标准数据格式（Alink JSON）| 定值SDK非动态注册与动态注册 | SOC 4G模组移植方案

2024-05-31 20:05:06

JSON和XML相互转换

2024-05-31 20:05:06

HTML5（超文本标记语言）

2024-05-31 20:05:46

Flutter中高级JSON处理：使用json_serializable进行深入定制

2024-05-31 20:05:45

html5 checkbox

2024-05-31 20:05:45

HTML5是什么？怎么学习HTML5？

2024-05-31 20:05:44

java系统架构图设计，Redis 存取 JSON 数据

2024-05-31 20:05:35

大家推荐的文章
1

基于Echarts的高校就业数据可视化管理系统设计与实现（计算机毕业设计源码81461）

2024-05-29 10:05:301000
2

VUE3 Vite Pinia TypeScript项目笔记

2024-05-20 14:05:191000
3

轻松掌握数据库中JSON数据提取：json_extract函数用法详解

2024-05-09 11:05:011000
4

HTML5(六)——Canvas 高级操作

2024-05-09 10:05:191000
5

UE4.27支持HTML5

2024-05-07 13:05:261000
6

前端vue项目使用Decimal.js做加减乘除求余运算

2024-04-23 21:04:401000
7

js数组常用方法（19种）|你会的到底有多少呢？

2024-04-08 11:04:211000
8

jQuery事件处理

2024-03-12 01:03:321000
9

【Echarts系列】—— 实现电池图、3D立体圆形柱状图

2024-03-03 11:03:011000
10

ECharts 饼状图颜色设置

2024-02-16 14:02:001000

rss订阅 百度xml 谷歌xml 搜狗xml soxml 神马搜索xml 网站地图

Copyright © 2018-2022 前端哥 陕ICP备2023000550号-1 前端哥

讲个笑话：程序员心理活动：看别人的代码，这都写得什么玩意儿，垃圾！！看自己一个月前的代码：这TM谁写得代码，垃圾！再一看，这代码怎么这么眼熟？我自己写得？仔细一看，卧槽！还TM的真是我自己写的！！

前端技术交流源码工具分享网站

会员中心 联系我 留言建议 回顶部
复制成功！