Echarts入门教程快速上手

最新推荐文章于 2024-05-20 11:40:56 发布

元元猿

最新推荐文章于 2024-05-20 11:40:56 发布

阅读量52

点赞数 1

分类专栏： ECharts 文章标签： echarts 前端 javascript

本文链接：https://blog.csdn.net/qq_55050872/article/details/133748884

版权

ECharts 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

详细步骤

1、下载并引入echart.js文件

<script src="echarts.js"></script>

2、准备一个有宽高的DOM容器

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

3、初始化echarts实例对象

let firstChart = echarts.init(document.getElementById("institutional-user"));

4、设置配置项和数据

// 图表配置项及数据
let firstChartOption = {
  //提示框配置
  tooltip: {},
  //图例配置
  legend: {
    data: [
      {
        name: "数据项",
        //数据项的图例标记设置为圆
        icon: "circle",
      },
    ],
  },
  //x轴配置
  xAxis: {
    data: ["5月", "6月", "7月", "8月", "9月", "10月"],
  },
  //y轴配置
  yAxis: {},
  series: [
    //数据项
    {
      //数据项设置为柱状图
      type: "bar",
      name: "数据项",
      //数据项的数据
      data: [21, 17, 90, 20, 30, 60],
      //图形样式
      itemStyle: {
        color: "#50AEDD",
        borderRadius: [4, 4, 0, 0],
      },
      //柱条宽度设置
      barWidth: 36,
    },
  ],
};

5、将配置项设置给echarts实例对象

firstChart.setOption(firstChartOption);

6、解决echarts图表自适应问题（可不设置）

// resize事件：监听窗口变化、监听DOM元素宽高的变化
// 解决echarts图表相对某个元素自适应问题
window.addEventListener("resize", function () {
  firstChart.resize();
});

完整代码

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>ECharts</title>
    <!-- 引入下载的 ECharts 文件 -->
    <script src="echarts.js"></script>
  </head>
  <body>
    <!-- 为 ECharts 准备一个定义了宽高的 DOM （一定要设置宽高，不然图表不显示）-->
    <div id="echartsDomId" style="width: 600px;height:400px;"></div>
    <script type="text/javascript">
      // 基于准备好的dom，初始化echarts实例
      let firstChart = echarts.init(
      // 为echarts准备的dom
        document.getElementById("institutional-user")
      );

	  // 解决echarts图表自适应问题（可不设置）
      // resize事件：监听窗口变化、监听DOM元素宽高的变化
      // 解决echarts图表相对某个元素自适应问题
      window.addEventListener("resize", function () {
        firstChart.resize();
      });

      // 图表配置项及数据
      let firstChartOption = {
        //提示框配置
        tooltip:{},
        //图例配置
        legend: {
          data: [
            {
              name: "数据项",
              //数据项的图例标记设置为圆
              icon: "circle",
            },
          ],
        },
        //x轴配置
        xAxis: {
          data: ["5月", "6月", "7月", "8月", "9月", "10月"],
        },
        //y轴配置
        yAxis: {},
        series: [
          //数据项
          {
            //数据项设置为柱状图
            type: "bar",
            name: "数据项",
            //数据项的数据
            data: [21, 17, 90, 20, 30, 60],
            //图形样式
            itemStyle: {
              color: "#50AEDD",
              borderRadius: [4, 4, 0, 0],
            },
            //柱条宽度设置
            barWidth: 36,
          },
        ],
      };

      // 将配置项设置给echarts实例对象，用上述定义的配置项和数据显示图表
      firstChart.setOption(firstChartOption);
    </script>
  </body>
</html>