eachart相关知识

绘制饼状图

// 绘制饼状图
function initPieChart(chart, chartdata) {
  var option = {
    color: specificationsModelObj.value.color,
    //   legend: {
    //   orient: 'vertical',
    //   align:"auto",
    //   left: '80%',
    //   top:"37%",
    //   width :"40%",
    //   height:"100%",
    //   // itemStyle:{

    //   // },
    //   itemGap : 16,
    //   itemWidth :"25",
    //   itemHeight :"25"
    // },
    series: [
      {
        // width:"120%",
        // height:"120%",
        name: "Access From",
        type: "pie",
        radius: "45%",
        data: chartdata,
        showEmptyCircle: true,
        center: ["45%", "50%"],
        // emptyCircleStyle: {
        //   color: "#797A7C",
        // },
        emphasis: {
          //  itemStyle: {

          // },
          label: {
            show: true,
            color: "#D6000F",
            formatter: "{c}%",
          },
          labelLine: {
            lineStyle: {
              color: "#D6000F",
            },
          },
        },
        label: {
          show: true,
          formatter: "{c}%",
        },

        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: "rgba(0, 0, 0, 0.5)",
          },
        },
      },
    ],
  };
  chart.setOption(option);
  // chart.dispatchAction({
  //   type: "highlight",
  //   //seriesIndex：number | array系列 index，可以是一个数组指定多个系列
  //   seriesIndex: 0,
  //   //dataIndex：number 数据的 index
  //   dataIndex: pieChartIndex.value,
  // });
  let checkIndrex = "";
  // 点击时选中高亮,其他不高亮
  chart.on("click", (params) => {
    checkIndrex = params.dataIndex;

    // specificationsModelObj.value.index = checkIndrex;

    chartdata.forEach((item, index) => {
      if (index == checkIndrex) {
        chart.dispatchAction({
          type: "highlight",
          seriesIndex: 0,
          dataIndex: index,
        });
      } else {
        chart.dispatchAction({
          type: "downplay",
          seriesIndex: 0,
          dataIndex: index,
        });
      }
    });
    chart.setOption(option);
  });
  // // 鼠标移出时除了选中高亮其余不高亮
  chart.on("mouseout", (params) => {
    if (params.dataIndex == checkIndrex) {
      chart.dispatchAction({
        type: "highlight",
        seriesIndex: 0,
        dataIndex: checkIndrex,
      });
      chart.setOption(option);
    }
  });
}

绘制柱状图

function initColumnar(chart, chartdata, number) {
  // 1是纵向,2是横向
  var option
  if (number == 1) {
    option = {
      grid: {
        left: "20%", //grid 组件离容器左侧的距离
        right: "30px", //grid 组件离容器右侧的距离
        bottom: "20%", //grid 组件离容器下边距的距离
      },
      xAxis: {
        type: "value",
      },
      yAxis: {
        type: "category",
        data: chartdata.y,
        axisLabel: {
          show: true,
          width: 90,
          overflow: "break",
          interval: "auto",
          align: "left",
          margin: "90",
        },
      },
      series: [

        {
          data: chartdata.x,

          barWidth: "20%",
          type: "bar",
          emphasis: {
            label: {
              show: true,
              color: "#D6000F",
              formatter: "{c}%",
            },
            itemStyle: {
              color: "#D6000F",
            },
          },
        },
      ],
      label: {
        show: true,
        formatter: "{c}",
        position: "right",
        // formatter: "{c}%",
      },
    };
  } else {

    option = {
      color: specificationsModelObj.value.color,

      grid: {
        left: "2%", //grid 组件离容器左侧的距离
        right: "1px", //grid 组件离容器右侧的距离
        bottom: "30%", //grid 组件离容器下边距的距离
      },
      xAxis: {
        type: "category",
        data: chartdata.x,
        axisLabel: {
          show: true,
          width: 90,
          overflow: "break",
          interval: "auto",
          align: "left",
          margin: "90",
        },
      },
      yAxis: {
        type: "value",
      },
      label: {
        show: true,
        formatter: "{c}",
        position: "right",
        // formatter: "{c}%",
      },
    };
    let series = []
    let newarr = []

    chartdata.y[0].forEach(item => newarr.push([]))


    chartdata.y.forEach((item, index) => {

      item.forEach((item1, index1) => {
        newarr[index1].push(item1)
      })


    })
    console.log(chartdata.y, " chartdata.y")
    console.log(newarr, "newarr")
    newarr.forEach(item => {
      let obj = {
        data: item,

        barWidth: "6.6%",
        type: "bar",
        label: {
          formatter: function (num) {

            if (num.value > 0) {
              return num.value
            } else {
              return ""
            }
          }
        },
        emphasis: {
          label: {
            show: true,
            color: "#D6000F",
            formatter: "{c}%",
          },
          itemStyle: {
            color: "#D6000F",
          },
        },
      }
      series.push(obj)
    })
    console.log(series, " option.series")
    option.series = series
  }
  chart.setOption(option);
  // chart.dispatchAction({
  //   type: "highlight",
  //   //seriesIndex：number | array系列 index，可以是一个数组指定多个系列
  //   seriesIndex: 0,
  //   //dataIndex：number 数据的 index
  //   dataIndex: pieChartIndex.value,
  // });
  // let checkIndrex = "";
  // // // 点击时选中高亮,其他不高亮
  // chart.on("click", (params) => {
  //   checkIndrex = params.dataIndex;

  //   // specificationsModelObj.value.index = checkIndrex;

  //   chartdata.forEach((item, index) => {
  //     if (index == checkIndrex) {
  //       chart.dispatchAction({
  //         type: "highlight",
  //         seriesIndex: 0,
  //         dataIndex: index,
  //       });
  //     } else {
  //       chart.dispatchAction({
  //         type: "downplay",
  //         seriesIndex: 0,
  //         dataIndex: index,
  //       });
  //     }
  //   });
  //   chart.setOption(option);
  // });
  // // // 鼠标移出时除了选中高亮其余不高亮
  // chart.on("mouseout", (params) => {
  //   if (params.dataIndex == checkIndrex) {
  //     chart.dispatchAction({
  //       type: "highlight",
  //       seriesIndex: 0,
  //       dataIndex: checkIndrex,
  //     });
  //     chart.setOption(option);
  //   }
  // });
}

绘制折线图(echarts实例对象,实例参数options,默认的值)

function initBroken(chart, chartdata, dataIndex, textStyle) {
  console.log(chart, chartdata, dataIndex, textStyle);
  var option = {
    grid: {
      left: "5%",
      right: "5%",
      bottom: "0%",
      top: "15%",
      containLabel: true,
    },
    xAxis: {
      type: "category",
      triggerEvent: true,
      data: chartdata.xList,
      axisLabel: {
        // x轴上选中文字高亮
        textStyle,
      },
    },
    yAxis: {
      type: "value",
    },
    series: [
      {
        data: chartdata.yList,
        type: "line",
        smooth: true,
        // symbol: "circle",
        symbolSize: 10,
        // 高亮时折线的处理(颜色,阴影,数值颜色)
        emphasis: {
          itemStyle: {
            color: "#D6000F",
            borderColor: "#D6000F",
          },
          label: {
            // normal: {
            show: true,
            position: "top",
            color: "#D6000F",
          },
        },
      },
    ],
  };
  chart.off("click");
  chart.off("mouseout");
  chart.setOption(option);
  // 默认选中高亮
  chart.dispatchAction({
    type: "highlight",
    //seriesIndex：number | array系列 index，可以是一个数组指定多个系列
    seriesIndex: 0,
    //dataIndex：number 数据的 index
    dataIndex: dataIndex,
  });
  let checkIndrex = dataIndex;
  // 点击时选中高亮,其他不高亮
  chart.on("click", (params) => {
    checkIndrex = params.dataIndex;
    if (turnoverObj.value.type == 1) {
      month.value = checkIndrex + 1;
    } else if (turnoverObj.value.type == 2) {
      quarter.value = checkIndrex + 1;
    } else if (turnoverObj.value.type == 3) {
      year.value = chartdata.xList[checkIndrex];
    }
    chartdata.xList.forEach((item, index) => {
      if (index == checkIndrex) {
        chart.dispatchAction({
          type: "highlight",
          seriesIndex: 0,
          dataIndex: index,
        });
      } else {
        chart.dispatchAction({
          type: "downplay",
          seriesIndex: 0,
          dataIndex: index,
        });
      }
    });
    chart.setOption(option);
  });
  // 鼠标移出时除了选中高亮其余不高亮
  chart.on("mouseout", (params) => {
    if (params.dataIndex == checkIndrex) {
      chart.dispatchAction({
        type: "highlight",
        seriesIndex: 0,
        dataIndex: checkIndrex,
      });
      chart.setOption(option);
    }
  });
}