关于echarts

最新推荐文章于 2024-04-09 13:12:10 发布

斑驳的岁月

最新推荐文章于 2024-04-09 13:12:10 发布

阅读量123

点赞数

分类专栏：前端学习文章标签： javascript k线图

本文链接：https://blog.csdn.net/weixin_39467231/article/details/118863680

版权

前端学习专栏收录该内容

21 篇文章 1 订阅

订阅专栏

一个简单程序echarts入门

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="./node_modules/echarts/dist/echarts.js"></script>
    <style>
      #app {
        width: 600px;
        height: 300px;
      }
    </style>
  </head>
  <body>
    <div id="app"></div> 放置生成的数据表
    <script>
      var div = document.querySelector("#app");
      var myChart = echarts.init(div); 初始化echarts实例
      var arr = [
        {
          name: "Direct",
          Mon: 320,
          Tue: 302,
          Wed: 301,
          Thu: 334,
          Fri: 390,
          Sat: 330,
          Sun: 320,
        },
        {
          name: "Mail Ad",
          Mon: 120,
          Tue: 132,
          Wed: 301,
          Thu: 334,
          Fri: 390,
          Sat: 330,
          Sun: 320,
        },
        {
          name: "Affiliate Ad",
          Mon: 220,
          Tue: 182,
          Wed: 301,
          Thu: 334,
          Fri: 390,
          Sat: 330,
          Sun: 320,
        },
        {
          name: "Video Ad",
          Mon: 150,
          Tue: 212,
          Wed: 301,
          Thu: 334,
          Fri: 390,
          Sat: 330,
          Sun: 320,
        },
        {
          name: "Search Engine",
          Mon: 820,
          Tue: 832,
          Wed: 301,
          Thu: 334,
          Fri: 390,
          Sat: 330,
          Sun: 320,
        },
      ];
      指定图表的配置项和数据
      option = {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // Use axis to trigger tooltip
            type: "shadow", // 'shadow' as default; can also be 'line' or 'shadow'
          },
        },
        legend: {
          data:arr.map(item=>item.name),
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: {
          type: "value",
        },
        yAxis: {
          type: "category",
          data: Object.keys(arr[0]).filter(item=>item!=="name"),
        },
        series: arr.map(item=>{
            return {
                name: item.name,
                type: "bar",
                stack: "total",
                label: {
                    show: true,
                },
                emphasis: {
                    focus: "series",
                },
                data:Object.keys(item).filter(t=>t!="name").map(prop=>item[prop]),
                }
        }),
      };
      使用刚指定的配置项和数据显示图表
      myChart.setOption(option);
    </script>
  </body>
</html>