[JavaScript知识库]echarts图

柱状图和折线图混合

<template>
	<div id="midChart"></div>
</template>
<script>
import * as Echarts5 from "echarts5";
......
mounted() {
   this.initmidChart();
}
methods：{
	initmidChart() {
      let JsChart = Echarts5.init(document.getElementById("midChart"));
      var option = {
        //提示框组件
        tooltip: { 
          trigger: "axis", //触发类型
          axisPointer: { //辅助线的意思
            type: "cross",
            crossStyle: {
              color: "#999",
            },
          },
        },
        //图例组件
        legend: [
          {
            data: [
              "套餐升档办理量",
              "5G套包办理量",
              "权益办理量",
              "宽带新装在线办理量",
            ],
            y: "0",
            x: "center", //图例组件的位置
            textStyle: {
              color: "#AAD3E6", //更改文字颜色
              fontSize: 10,
            },
            itemWidth: 10, //图例小图标的大小
            itemHeight: 10,
            itemGap: 50, //图例之间的间距
          },
          {
            data: [
              ,
              "流量包办理量",
              "坐席营销开口率",
              "交叉营销推荐率",
              "融合保有转化率",
            ],
            y: "20",
            x: "center",
            textStyle: {
              color: "#AAD3E6", //更改坐标轴文字颜色
              fontSize: 10,
            },
            itemWidth: 10,
            itemHeight: 10,
            itemGap: 50,
          },
        ],
        xAxis: [
          {
            type: "category",//类目轴，适用于离散的类目数据
            data: ["6日", "7日", "8日", "9日", "10日", "11日"],
            axisTick: { show: false },//坐标轴刻度
            axisPointer: {
              type: "shadow",//阴影指示器
            },
            axisLabel: {//坐标轴刻度标签
              color: "#AAD3E6",
              fontSize: "10px",
            },
          },
        ],
        yAxis: [
          {
            type: "value",
            splitLine: {//坐标轴在 grid 区域中的分隔线
              lineStyle: {
                type: "dashed",//分隔线样式：虚线
              },
            },
            max: 1000,
            min: 0,
            splitNumber: 5, //y轴刻度间距
            axisLabel: {
              color: "#AAD3E6",
              fontSize: "10px",
            },
          },
        ],
        series: [
          {
            name: "套餐升档办理量",
            type: "bar",
            tooltip: {
              valueFormatter: function (value) {
                return value;
              },
            },
            data: [400, 490, 560, 632, 767, 600],
            itemStyle: {//柱状图颜色渐变
              color: new Echarts5.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: "#2378f7" },
                { offset: 0.5, color: "rgba(131, 191, 246,.5)" },
                { offset: 0.6, color: "rgba(131, 191, 246,.3)" },
                { offset: 0.8, color: "rgba(131, 191, 246,.1)" },
              ]),
            },
          },
          {
            name: "5G套包办理量",
            type: "bar",
            tooltip: {
              valueFormatter: function (value) {
                return value;
              },
            },
            data: [420, 450, 660, 732, 707, 600],
            itemStyle: {
              color: new Echarts5.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: "#06C4E1" },
                { offset: 0.5, color: "rgba(6, 196, 225,.5)" },
                { offset: 0.6, color: "rgba(6, 196, 225,.3)" },
                { offset: 0.8, color: "rgba(6, 196, 225,.1)" },
              ]),
            },
          },
          {
            name: "权益办理量",
            type: "bar",
            tooltip: {
              valueFormatter: function (value) {
                return value;
              },
            },
            data: [320, 400, 560, 632, 707, 750],
            itemStyle: {
              color: new Echarts5.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: "#FDD35B" },
                { offset: 0.5, color: " rgba(253, 211, 91,.5)" },
                { offset: 0.6, color: "rgba(253, 211, 91,.3)" },
                { offset: 0.8, color: "rgba(253, 211, 91,.1)" },
              ]),
            },
          },
          {
            name: "宽带新装在线办理量",
            type: "bar",
            tooltip: {
              valueFormatter: function (value) {
                return value;
              },
            },
            data: [300, 440, 460, 532, 607, 650],
            itemStyle: {
              color: new Echarts5.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: "#8C70F8" },
                { offset: 0.5, color: " rgba(140, 112, 248,.5)" },
                { offset: 0.6, color: "rgba(140, 112, 248,.3)" },
                { offset: 0.8, color: "rgba(140, 112, 248,.1)" },
              ]),
            },
          },
          {
            name: "流量包办理量",
            type: "bar",
            tooltip: {
              valueFormatter: function (value) {
                return value;
              },
            },
            data: [340, 400, 360, 432, 657, 550],
            itemStyle: {
              color: new Echarts5.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: "#EC652D" },
                { offset: 0.5, color: " rgba(236, 101, 45,.5)" },
                { offset: 0.6, color: "rgba(236, 101, 45,.3)" },
                { offset: 0.8, color: "rgba(236, 101, 45,.1)" },
              ]),
            },
          },

          {
            name: "坐席营销开口率",
            type: "line",
            // yAxisIndex: 1,
            tooltip: {
              valueFormatter: function (value) {
                return value / 100 + " %";
              },
            },
            data: [400, 490, 560, 632, 767, 600],
            lineStyle: {
              color: "#2DE756",
            },
            itemStyle: {
              color: "#2DE756", //拐点颜色
            },
          },
          {
            name: "交叉营销推荐率",
            type: "line",
            tooltip: {
              valueFormatter: function (value) {
                return value / 100 + " %";
              },
            },
            data: [370, 450, 460, 532, 667, 600],
            lineStyle: {//线的颜色。
              color: "#DD407E",
            },
            itemStyle: {
              color: "#DD407E", //拐点颜色
            },
          },
          {
            name: "融合保有转化率",
            type: "line",
            tooltip: {
              valueFormatter: function (value) {
                return value / 100 + " %";
              },
            },
            data: [532, 667, 600, 370, 450, 460],
            lineStyle: {
              color: "#B0E527",
            },
            itemStyle: {
              color: "#B0E527", 
            },
          },
        ],
      };

      JsChart.setOption(option);
    },
}

排行榜

 initRightChart() {
      let JsChart = Echarts5.init(document.getElementById("rightChart"));
      let ydata = [
        "优质会员占比",
        "会员流失率",
        "生产份额",
        "跨省应急有效人工通话量",
        "有效人工通话量",
        "会员规模",
      ];
      let xdata = [12, 13, 14, 15, 16, 17];
      var option = {
        title: {
          text: "生产排行",
          textStyle: {
            color: "#FFFFFF",
            fontWeight: "normal",
          },
        },
        tooltip: {},
        grid: {
          left: "30",
          right: "20",
          bottom: "20",
          top: "40",
          containLabel: false,//grid 区域是否包含坐标轴的刻度标签
        },
        xAxis: {
          type: "value",
          show: false,//是否显示 x 轴
        },
        yAxis: {
          type: "category",
          data: ydata,
          axisLine: {//坐标轴轴线
            show: false,
          },
          axisTick: {//坐标轴刻度
            show: false,
          },
          axisLabel: {//坐标轴刻度标签
            inside: true,//刻度标签是否朝内，默认朝外。
            verticalAlign: "bottom",//文字垂直对齐方式:'top'、'middle'、'bottom'           
            lineHeight: 40,
            color: "#AAD3E6",
            fontSize: 16,
            formatter: function (value, index) {
              // 设置y轴文字的颜色
              return value;
            },
          },
        },
        series: [
          {
            type: "bar",
            showBackground: true,//是否显示柱条的背景色
            label: {//图形上的文本标签，可用于说明图形的一些数据信息，比如值，名称等
              show: true,
              position: "right",
              color: "#EC652D",
            },
            barWidth: 10,
            itemStyle: {
              barBorderRadius: 7,
              color: new Echarts5.graphic.LinearGradient(0, 0, 1, 0, [
                { offset: 0, color: "#F9CA22" },
                { offset: 0.8, color: "#F85425" },
              ]),
            },
            data: xdata,
          },
        ],
      };
      JsChart.setOption(option);
    },

多重环形图

initLastChart() {
      let JsChart = Echarts5.init(document.getElementById("lastChart"));
      var option = {
        color: [
          "#00FFC6",
          "#8479EB",
          "#FBE494",
          "#FB7394",
          "#FFA080",
          "#06B3F8",
        ],
        tooltip: {},
        legend: {
          orient: "vertical",//图例组件垂直排列
          x: 20,
          y: 120,
          data: [
            "会员规模",
            "有效人工通话量",
            "跨省应急有效人工通话量",
            "生产份额",
            "会员流失率",
            "优质会员占比",
          ],
          textStyle: {
            color: "#AAD3E6", //更改文字颜色
            fontSize: 10,
          },
          itemGap: 20,
          itemWidth: 10,
          itemHeight: 10,
        },
        series: [
          {
            name: "会员规模",
            type: "pie",//饼图
            //起始刻度的角度，默认为 90 度，即圆心的正上方。0 度为圆心的正右方。
            startAngle: -90,
            hoverAnimation: false,
            tooltip: {},
            radius: ["20%", "27%"], //圆环宽度
            //饼图的中心（圆心）坐标，数组的第一项是横坐标，第二项是纵坐标。
            center: ["50%", "50%"],//设置成百分比时,是相对于容器宽高
            label: {
              normal: {
                show: false,
                position: "center",
                color: "#fff",
                formatter: function (params) {
                  return params.value;
                },
              },
            },
            labelLine: {//视觉引导线
              normal: {
                show: false,
              },
            },
            data: [
              {
                value: 300,
                itemStyle: {
                  normal: {
                    color: "rgba(80,150,224,0)",
                  },
                },
              },
              {
                value: 200,
                itemStyle: {
                  normal: {
                    color: "rgba(80,150,224,1)",
                  },
                },
              },
              {
                value: 100,
                itemStyle: {
                  normal: {
                    color: "rgba(80,150,224,0.1)",
                  },
                },
              },
            ],
          },
          {
            name: "有效人工通话量",
            type: "pie",
            startAngle: -90,
            radius: ["30%", "37%"],
            center: ["50%", "50%"],
            legendHoverLink: false,
            hoverAnimation: false,
            avoidLabelOverlap: false,
            label: {
              normal: {
                show: false,
                position: "center",
              },
              emphasis: {
                show: true,
                textStyle: {
                  fontSize: "30",
                  fontWeight: "bold",
                },
              },
            },
            labelLine: {
              normal: {
                show: false,
              },
            },
            data: [
              {
                value: 300,
                itemStyle: {
                  normal: {
                    color: "rgba(35,206,167,0)",
                  },
                },
              },
              {
                value: 210,
                itemStyle: {
                  normal: {
                    color: "rgba(35,206,167,1)",
                  },
                },
              },
              {
                value: 90,
                itemStyle: {
                  normal: {
                    color: "rgba(35,206,167,0.1)",
                  },
                },
              },
            ],
          },
          {
            name: "跨省应急有效人工通话量",
            type: "pie",
            startAngle: -90,
            hoverAnimation: false,
            radius: ["40%", "47%"],
            center: ["50%", "50%"],
            label: {
              normal: {
                show: false,
                position: "center",
              },
              emphasis: {
                show: true,
                textStyle: {
                  fontSize: "10",
                  fontWeight: "bold",
                },
              },
            },
            labelLine: {
              normal: {
                show: false,
              },
            },
            data: [
              {
                value: 300,
                itemStyle: {
                  normal: {
                    color: "rgba(1,218,220,0)",
                  },
                },
              },
              {
                value: 240,
                itemStyle: {
                  normal: {
                    color: "rgba(1,218,220,1)",
                  },
                },
              },
              {
                value: 60,
                itemStyle: {
                  normal: {
                    color: "rgba(1,218,220,0.1)",
                  },
                },
              },
            ],
          },
          {
            name: "生产份额",
            type: "pie",
            //起始刻度的角度，默认为 90 度，即圆心的正上方。0 度为圆心的正右方。
            startAngle: -90,
            hoverAnimation: false,
            tooltip: {},
            radius: ["50%", "57%"],
            center: ["50%", "50%"],
            label: {
              normal: {
                show: false,
                position: "center",
                color: "#fff",
                formatter: function (params) {
                  return params.value;
                },
              },
            },
            labelLine: {
              normal: {
                show: false,
              },
            },
            data: [
              {
                value: 300,
                itemStyle: {
                  normal: {
                    color: "rgba(255, 192, 203,0)",
                  },
                },
              },
              {
                value: 250,
                itemStyle: {
                  normal: {
                    color: "rgba(255, 192, 203,1)",
                  },
                },
              },
              {
                value: 50,
                itemStyle: {
                  normal: {
                    color: "rgba(255, 192, 203,0.1)",
                  },
                },
              },
            ],
          },
          {
            name: "会员流失率",
            type: "pie",
            startAngle: -90,
            radius: ["60%", "67%"],
            center: ["50%", "50%"],
            legendHoverLink: false,
            hoverAnimation: false,
            avoidLabelOverlap: false,
            label: {
              normal: {
                show: false,
                position: "center",
              },
              emphasis: {
                show: true,
                textStyle: {
                  fontSize: "30",
                  fontWeight: "bold",
                },
              },
            },
            labelLine: {
              normal: {
                show: false,
              },
            },
            data: [
              {
                value: 300,
                itemStyle: {
                  normal: {
                    color: "rgba(255, 165, 0,0)",
                  },
                },
              },
              {
                value: 260,
                itemStyle: {
                  normal: {
                    color: "rgba(255, 165, 0,1)",
                  },
                },
              },
              {
                value: 40,
                itemStyle: {
                  normal: {
                    color: "rgba(255, 165, 0,0.1)",
                  },
                },
              },
            ],
          },
          {
            name: "优质会员占比",
            type: "pie",
            startAngle: -90,
            hoverAnimation: false,
            radius: ["70%", "77%"],
            center: ["50%", "50%"],
            label: {
              normal: {
                show: false,
                position: "center",
              },
              emphasis: {
                show: true,
                textStyle: {
                  fontSize: "10",
                  fontWeight: "bold",
                },
              },
            },
            labelLine: {
              normal: {
                show: false,
              },
            },
            data: [
              {
                value: 300,
                itemStyle: {
                  normal: {
                    color: "rgba(135, 206, 235,0)",
                  },
                },
              },
              {
                value: 280,
                itemStyle: {
                  normal: {
                    color: "rgba(135, 206, 235,1)",
                  },
                },
              },
              {
                value: 20,
                itemStyle: {
                  normal: {
                    color: "rgba(135, 206, 235,0.1)",
                  },
                },
              },
            ],
          },
        ],
      };
      JsChart.setOption(option);
    },