2023-3-8/echarts

1.写echarts容器

   <div id="main" style="width: 600px; height: 400px"></div>

2.通过dom找到盒子容器，初始化echarts实例

 var myChart = echarts.init(document.getElementById("main"));

3.指定图表的配置项和数据

var option = {
      title: {
        text: "今日销量",//标题名字
      },
      tooltip: {},
      legend: {
        data: ["销量"],
      },
      xAxis: {
        data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"],
      },
      yAxis: {},
      series: [
            {
          name: "销量",
          type: "bar", //通过修改这里改变 bar是柱状图 line是折线图 pie是饼状图
          data: [
            {
              value: 61,
              itemStyle: { //设置单个颜色
                color: "red", 
              },
            },
            20,
            36,
            10,
            10,
            20,
          ],
        },
      ],
    };

4. 使用刚指定的配置项和数据显示图表。

  myChart.setOption(option);

（1）设置折线图

  var myChart2 = echarts.init(document.getElementById("main2"));
    // 指定图表的配置项和数据
    var option2 = {
      title: {
        text: "今日销量",
      },
      tooltip: {},
      legend: {
        data: ["销量"],
      },
      xAxis: {
        data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"],
      },
      yAxis: {},
      series: [
        {
          name: "销量",
          type: "line",
          data: [
            {
              value: 61,
              itemStyle: {
                color: "red",
              },
            },
            20,
            36,
            10,
            10,
            20,
          ],
        },
      ],
    };

    // 使用刚指定的配置项和数据显示图表。
    myChart2.setOption(option2);

（2）设置饼状图

 var myChart3 = echarts.init(document.getElementById("main3"));
    // 指定图表的配置项和数据
    var option3 = {
      title: {
        text: "水果极度销售额",
        subtext: "嘿嘿嘿",
        left: "center",
      },
      tooltip: {
        trigger: "item",
      },
      legend: {
        orient: "vertical",
        left: "left",
      },
      series: [
        {
          name: "水果大会",
          type: "pie",
          radius: "50%",
          data: [
            { value: 1048, name: "苹果" },
            { value: 735, name: "香蕉" },
            { value: 580, name: "橘子" },
            { value: 484, name: "橙子" },
            { value: 300, name: "水蜜桃" },
          ],
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: "rgba(0, 0, 0, 0.5)",
            },
          },
        },
      ],
    };

    // 使用刚指定的配置项和数据显示图表。
    myChart3.setOption(option3);