echarts 堆叠图 ， 一条线两色， 饼图

笔记

堆叠

// html
 <div class="mt14 chartClass">
        <div :id="chartNum" style="width:98%;height:100px; marginTop:-50px;"></div>
      </div>

data(){
return {
 childChart: {
        el: this.chartNum,
        title: this.tit3,
        series_name: this.tit3,
        radius: "60%",
        date: this.myChildChart.date,
        line: this.myChildChart.line
      },
}}

// 调用
mounted(){

 this.duiDie(
      this.chartNum,
      this.childChart.title,
      this.childChart.series_name,
      this.childChart.radius,
      this.childChart.date,
      this.childChart.line
    );
    }

  duiDie(el, title, series_name, radius, date, line, roseType = false) {
      console.log(el, line);
      let eChart = echarts.init(document.getElementById(el));

      var option;
      if (line.length == 0) {
        // 暂无数据
        option = {
          title: {
            text: "数据正在飞奔回来！",
            x: "center",
            y: "bottom",
            textStyle: {
              fontSize: 14,
              fontWeight: "normal"
            }
          }
        };
      } else {
        option = {
          color: ["#00DDFF"],
          title: {
            // text: "测试堆叠图"
          },
          tooltip: {
            trigger: "axis",
            formatter: "{a} <br/>{b}:{c}:{d} ",
            axisPointer: {
              type: "cross",
              label: {
                backgroundColor: "#6a7985"
              }
            }
          },
          legend: false,
          toolbox: {
            // feature: {
            //   saveAsImage: {}
            // }
          },
          grid: {
            left: "1%",
            right: "1%",
            bottom: "1%",
            containLabel: false
          },
          xAxis: [
            {
              type: "category",
              boundaryGap: false,
              axisTick: {
                //关键设置，坐标轴刻度也不显示
                show: false
              },
              splitLine: {
                // 拆分线条， 是否显示图表内的纵线
                show: false
              },

              axisLabel: { show: false },
              axisLine: {
                //关键设置，不显示X轴线条
                show: false
              },
              data: date
            }
          ],
          yAxis: [
            {
              // name:"消耗",
              // type: "value",
              // nameTextStyle:{
              //      fontWeight:'bold',
              //      color:'red'
              // },
              splitLine: {
                // 拆分线条， 是否显示图表内的纵线
                show: false
              },
              axisTick: {
                show: false
              },
              axisLabel: {
                show: false
              },
              axisLine: {
                lineStyle: {
                  color: "#fff",
                  width: 1 //这里是为了突出显示加上的
                }
              }
            }
          ],
          series: [
            {
              // name: "Line 2",
              type: "line",
              stack: "Total",
              smooth: true,
              lineStyle: {
                width: 0
              },
              showSymbol: false,
              areaStyle: {
                opacity: 0.8,
                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: "rgb(77, 119, 255)"
                  },
                  {
                    offset: 1,
                    color: "rgb(0, 221, 255)"
                  }
                ])
              },
              emphasis: {
                focus: "series"
              },
              data: line
            }
          ]
        };
      }

      // 二次加载重新绘制图
      document.getElementById(el).removeAttribute("_echarts_instance_");
      // 兼容  清空数据
       eChart.clear();
       // 数据重绘
      eChart.setOption(option, true);
      //  缩放浏览器重新渲染
      window.addEventListener("resize", function() {
        eChart.resize();
      });
    },

一条线两色

twoColor(el, title, series_name, radius, data, roseType = false) {
      let eChart = this.$echarts.init(document.getElementById(el));
      let option = {
        title: {
          text: "Stacked Line"
        },
        tooltip: {
          trigger: "axis"
        },
        legend: {
          data: ["Email", "Union Ads"]
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true
        },
        toolbox: {
          feature: {
            saveAsImage: {}
          }
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: [
            "Mon",
            "Tue",
            "Wed",
            "Thu",
            "Fri",
            "Sat",
            "Sun",
            "8",
            "9",
            "10"
          ]
        },
        yAxis: {
          type: "value"
        },
        series: [
          {
            name: "Email",
            type: "line",
            stack: "emial",
            data: [120, 132, 101, 134, 90, 230, 210, 330, 354, 696]
          },
          {
            name: "Union Ads",
            type: "line",
            stack: "Total",
            data: [120, 132, 101, 134, 90, 230, 210]
          }
        ]
      };
      eChart.setOption(option, true);
    },

饼图

drawPie(el, title, series_name, radius, data, roseType = false) {
      let eChart = this.$echarts.init(document.getElementById(el));
      let option = {
        title: {
          text: title,
          left: "left",
          textStyle: {
            fontSize: 16
          }
        },
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        grid: {
          top: "15%",
          left: "3%",
          right: "3%",
          containLabel: true
        },
        textStyle: {
          fontSize: 14,
          fontWeight: 400
        },
        color: [
          "#5470c6",
          "#91cc75",
          "#fac858",
          "#ee6666",
          "#73c0de",
          "#3ba272",
          "#fc8452",
          "#9a60b4",
          "#ea7ccc",
          "#5470c6",
          "#91cc75",
          "#fac858",
          "#ee6666",
          "#73c0de",
          "#3ba272",
          "#fc8452",
          "#9a60b4",
          "#ea7ccc",
          "#5470c6",
          "#91cc75",
          "#fac858",
          "#ee6666",
          "#73c0de",
          "#3ba272",
          "#fc8452",
          "#9a60b4",
          "#ea7ccc",
          "#5470c6",
          "#91cc75",
          "#fac858",
          "#ee6666",
          "#73c0de",
          "#3ba272",
          "#fc8452",
          "#9a60b4",
          "#ea7ccc"
        ],
        series: [
          {
            name: "Email",
            type: "line",
            stack: "emial",
            data: [120, 132, 101, 134, 90, 230, 210, 330, 354, 696]
          },
          {
            name: series_name,
            type: "pie",
            [roseType ? "roseType" : ""]: "area",
            radius: radius,
            emphasis: {
              label: {
                show: true
              }
            },
            data: data
          }
        ]
      };
      eChart.setOption(option, true);
    }