Echarts入门--常用工具箱组件

最新推荐文章于 2024-05-27 20:47:14 发布

jimjiayu

最新推荐文章于 2024-05-27 20:47:14 发布

阅读量3.9k

点赞数 1

分类专栏： Echarts 文章标签： Echarts

本文链接：https://blog.csdn.net/zhongshijun521/article/details/72026887

版权

Echarts 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

这里写图片描述

<!DOCTYPE html>
<html>
<head>
    <title>bar</title>
    <script type="text/javascript" src="../echarts.min.js"></script>
</head>
<body>
  <div id="main" style="width:900px;height: 400px;"></div>
  <script type="text/javascript">
    //基于准备好的demo,初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'));
    //指定图表的配置项和数据
    var option = {
        // 标题
        title:{
            text:'Echarts 入门实例',

        },
      // 工具箱
      toolbox:{
        show:true,
        feature:{
            // 数据视图
            dataView:{
                show:true
            },
            // 还原
            restore:{
                show:true
            },
            // 区域缩放
            dataZoom:{
                show:true
            },
            // 保存图片
            saveAsImage:{
                show:true
            },
            //动态类型切换
            magicType:{
                type:['line','bar']
            }
        }
      },
      // 图例
      legend:{
        data:['销量']
      },
      // x轴
      xAxis:{
        data:["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
      },
      // y轴
      yAxis:{},
      // 数据
      series:[{
        name:'销量',
        // 直方图
        type:'bar',
        data:[5,20,36,10,10,20]
      }
      ]
    }
    // 使用刚指定的配置项和数据显示图表
    myChart.setOption(option);
  </script>
</body>
</html>

这里写图片描述

jimjiayu

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
Echarts入门--常用工具箱组件

<!DOCTYPE html><html><head> <title>bar</title> <script type="text/javascript" src="../echarts.min.js"></script></head><body> <div id="main" style="width:900px;height: 400px;"></div> <sc
复制链接

扫一扫