ECharts简单入门（发送请求）

1.绘制一个简单的图表

<template>
  <div id="main"></div>
</template>

<script setup>
import { onMounted } from "vue";
import * as echarts from "echarts";
onMounted(() => {
  // 1.基于准备好的dom，初始化echarts实例
  var myChart = echarts.init(document.getElementById("main"));
  // 2.指定图表的配置项和数据
  var option = {
    title: {
      text: "ECharts 入门示例",
    },
    tooltip: {},
    legend: {
      data: ["销量"],
    },
    xAxis: {
      data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"],
    },
    yAxis: {},
    series: [
      {
        name: "销量",
        type: "bar",
        data: [5, 20, 36, 10, 10, 20],
      },
    ],
  };
  // 3.使用刚指定的配置项和数据显示图表。
  myChart.setOption(option);
});
</script>

<style>
#main {
  width: 600px;
  height: 400px;
}
</style>

2.坐标轴双曲线

<template>
  <div id="main"></div>
</template>

<script setup>
import { onMounted } from "vue";
import * as echarts from "echarts";
//第一条曲线的点
function generateData() {
  let data = [];
  for (let i = -200; i <= 200; i += 0.1) {
    data.push([i, i*i/10]);
  }
  return data;
}
//第二条曲线的点
function generateData1() {
  let data = [];
  for (let i = -200; i <= 200; i += 0.1) {
    data.push([i, i*i/10-10]);
  }
  return data;
}
var option = {
  animation: false,
  grid: {
    top: 40,
    left: 50,
    right: 40,
    bottom: 50
  },
  xAxis: {
    name: 'x',
    minorTick: {
      show: true
    },
    minorSplitLine: {
      show: true
    }
  },
  yAxis: {
    name: 'y',
    min: -100,
    max: 100,
    minorTick: {
      show: true
    },
    minorSplitLine: {
      show: true
    }
  },
  dataZoom: [
    {
      show: true,
      type: 'inside',
      filterMode: 'none',
      xAxisIndex: [0],
      startValue: -20,
      endValue: 20
    },
    {
      show: true,
      type: 'inside',
      filterMode: 'none',
      yAxisIndex: [0],
      startValue: -20,
      endValue: 20
    }
  ],
  series: [
    {
      type: 'line',
      showSymbol: false,
      clip: true,
      data: generateData()
    },
    {
      type: 'line',
      showSymbol: false,
      clip: true,
      data: generateData1()
    }
  ]
};
onMounted(() => {
  // 1.基于准备好的dom，初始化echarts实例
  var myChart = echarts.init(document.getElementById("main"));
  // 2.指定图表的配置项和数据
  // 3.使用刚指定的配置项和数据显示图表。
  myChart.setOption(option);
});
</script>

<style>
#main {
  width: 600px;
  height: 400px;
}
</style>

3.发送请求获取数据

<template>
  <div id="bar-box"></div>
</template>

<script lang="ts" setup>
import { onBeforeUnmount, onMounted, reactive } from "vue";
import * as echarts from "echarts";
import { getSaleDataApi } from "@/api/total";

const dataset = reactive([]);
var myChart;

// 获取销售数据(发送请求，如果有参数，执行回调函数)
const getSaleData = (cb) => {
  getSaleDataApi().then((res: any) => {
    if (res.data.code == "200") {
      // res.dta.data
      res.data.data.forEach((item) => {
        dataset.push([item.x, item.val]);
      });
      cb && cb();
    }
  });
};

// 绘制图表
function drawBar() {
  myChart.setOption({
    title: {
      text: "ECharts 柱状图-销量图表",
    },
    tooltip: {},
    xAxis: { type: "category" },
    yAxis: {},
    dataset: {
      source: [["product", "销量"], ...dataset],
    },
    series: [
      {
        name: "销量",
        type: "bar",
      },
    ],
  });
}

onMounted(() => {
  myChart = echarts.init(document.getElementById("bar-box")); // 基于准备好的dom，初始化echarts实例
  getSaleData(drawBar);
});

//每一秒发一次请求
// setInterval(()=>{
//     getSaleData(drawBar);
// },1000);

// function resizeChart() {
//     myChart?.resize();
// }
// //当窗口大小发生改变时，图表的大小也跟着发生改变
// window.addEventListener('resize', resizeChart);
// onBeforeUnmount(() => {
//     window.removeEventListener("resize", resizeChart)
// })
</script>

<style scoped>
#bar-box {
  width: 600px;
  height: 400px;
}
</style>