Echarts五步法加初体验

╰半夏微凉° 2023-01-22 10:52 22阅读 0赞

使用步骤：

1.  引入echarts 插件文件到html页面中
2.  准备一个具备大小的DOM容器

1.  初始化echarts实例对象

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

1.  指定配置项和数据(option)

var option = {     xAxis: {         type: 'category',        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']    },    yAxis: {         type: 'value'    },    series: [{         data: [820, 932, 901, 934, 1290, 1330, 1320],        type: 'line'    }]};

1.  将配置项设置给echarts实例对象

myChart.setOption(option);

<!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
        <style>
          .box { 
            width: 300px;
            height: 300px;
            background-color: pink;
          }
        </style>
      </head>
      <body>
        <div class="box"></div>
        <script src="js/echarts.min.js"></script>
        <script>
          // 初始化实例对象 echarts.init(dom容器);
          var myChart = echarts.init(document.querySelector(".box"));
          // 指定配置项和数据
          var option = { 
            title: { 
              text: "ECharts 入门示例"
            },
            tooltip: { },
            legend: { 
              data: ["销量"]
            },
            xAxis: { 
              data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
            },
            yAxis: { },
            series: [
              { 
                name: "销量",
                type: "bar",
                data: [5, 20, 36, 10, 10, 20]
              }
            ]
          };
          // 把配置项给实例对象
          myChart.setOption(option);
        </script>
      </body>
    </html>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NzgzNjYw_size_16_color_FFFFFF_t_70]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NzgzNjYw_size_16_color_FFFFFF_t_70 1]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NzgzNjYw_size_16_color_FFFFFF_t_70]: /images/20221020/8425dcc3867349438d2370d4ac0a1c71.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NzgzNjYw_size_16_color_FFFFFF_t_70 1]: /images/20221020/7b74188b0b104d759231975c030c6096.png