[JavaScript知识库]echarts 使用

echarts 使用? echarts外部元素必须有宽高

 <div id="myCharts" style="width: 100%; height: 100%"></div>

  const init = () => {
      // 需要获取到element,所以是onMounted的Hook
      let myChart = echarts.init((document as any).getElementById("myChart"));
      // 绘制图表
      myChart.setOption({
        legend: {},
        toolbox: {
          show: true,
          feature: {
            // dataView: {}, // 数据视图
            // restore: {}, // 重置
            // dataZoom: {}, // 区域缩放
            magicType: {
              type: ["bar", "line"],
            }, // 动态图表类型的切换
            saveAsImage: {}, // 导出图片
          },
        },
        xAxis: [
          {
            type: "category",
            // name:'年',
            data: ["周日", "周一", "周二", "周三", "周四", "周五", "周六"],
            //隐藏刻度线
            axisTick: {
              show: false,
            },
            //X轴字体样式和颜色
            axisLabel: {
              color: "#96A0B5",
              fontSize: 12,
            },
            //x轴颜色样式
            axisLine: {
              lineStyle: {
                color: "#EFF3FA",
              },
            },
          },
        ],
        yAxis: [
          {
            type: "value",
            min: 0, //Y轴最小坐标
            max: 800, //Y轴最大坐标
            //隐藏Y轴
            axisLine: {
              show: false,
            },
            //隐藏y轴刻度线
            axisTick: {
              show: false,
            },
            //字体样式和颜色
            axisLabel: {
              color: "#96A0B5",
              fontSize: 12,
            },
            //网格线样式和颜色
            splitLine: {
              show: true,
              lineStyle: {
                color: ["#EFF3FA"],
                width: 1,
                type: "solid",
              },
            },
          },
          {
            type: "value",
            min: 0, //Y轴最小坐标
            max: 800, //Y轴最大坐标
            //坐标轴显示百分比，颜色，字体样式
            axisLabel: {
              show: true,
              interval: "auto",
              color: "#96A0B5",
            },
            //y轴
            axisLine: {
              show: false,
            },
            //y轴刻度线
            axisTick: {
              show: false,
            },
            //网格线
            splitLine: {
              show: true,
              lineStyle: {
                color: ["#EFF3FA"],
                width: 1,
                type: "solid",
              },
            },
          },
        ],
        series: [
          {
            name: "上周金额",
            type: "bar",
            barWidth: "10",
            smooth: true, //变曲线
            yAxisIndex: 0, //当左右都有Y轴时区分坐标
            //修改图的样式
            itemStyle: {
              color: "#FDB92C", //柱子的颜色
              borderRadius: [6, 6, 0, 0], // 柱边显示
            },
            barGap: "50%", //柱状图之间间距
            data: [100, 200, 150, 250, 500, 300, 400],
          },
          {
            name: "本周金额",
            type: "bar",
            yAxisIndex: 0,
            smooth: true, //变曲线
            barWidth: "10",
            itemStyle: {
              color: "#2A85FF", //柱子的颜色
              borderRadius: [6, 6, 0, 0], // 柱边显示
            },
            data: [46.7, 181, 63.2, 63.2, 1.25, 173, 7.2],
          },
          {
            name: "上周订单",
            type: "line",
            barWidth: "10",
            symbol: "circle" /*拐点样式*/,
            smooth: true, //变曲线
            symbolSize: 3, //拐点大小
            itemStyle: {
              color: "#FF1D1D", //柱子的颜色
              borderRadius: [6, 6, 0, 0], // 柱边显示
            },
            data: [100, 150, 120, 200, 250, 100, 300],
          },
          {
            name: "本周订单",
            type: "line",
            barWidth: "10",
            smooth: true, //折线变曲线
            symbol: "circle" /*拐点样式*/,
            symbolSize: 3, //拐点大小
            itemStyle: {
              color: "#4BEEE4", //柱子的颜色
              borderRadius: [6, 6, 0, 0], // 柱边显示
            },
            data: [100, 130, 180, 200, 250, 180, 300],
          },
        ],
      });
      window.onresize = function () {
        // 自适应大小
        myChart.resize();
      };
    };