Echarts可视化教程（七）—— 工具箱组件与详情提示框组件

最新推荐文章于 2024-09-27 15:52:57 发布

書青

最新推荐文章于 2024-09-27 15:52:57 发布

阅读量114

点赞数

文章标签： echarts 前端 javascript

本文链接：https://blog.csdn.net/weixin_75038224/article/details/142590504

版权

第1关： Echarts中的工具箱组件与详情提示框组件

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
    <!-- 引入 echarts.js -->
	<script type="text/JavaScript" src="../static/echarts.min.js"></script>
<body>
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="width: 600px;height:400px;"></div>

    <script type="text/javascript">
    var myChart = echarts.init(document.getElementById('main'));
    myChart.setOption({
        /********* Begin
         * 下载、缩放、缩放后还原、转变为折线图、转变为堆积图、转变为柱状图 
        *********/
      toolbox: {
            show : true,
            feature:{
                saveAsImage: {
         show:true,
         type:['jpg'],
         name:'下载的echarts图片',
         pixelRatio:1
         },
         dataZoom:{
                  show:true,
                  title:{
                    zoom:"这是缩放按钮",
                    back:"这是还原按钮"
                  }
              }
              ,
              magicType: {
           show:true,
           type:['line', 'stack','bar']
       }
        },
        
        tooltip:{
            trigger: 'axis',
            show:true
            },
        },
        title : {
            text : "新冠死亡人数（截至2021年9月）"//标题
        },
        xAxis : [
          {
              type : 'category',//表示x轴的每一项由几组数据组成
              data : ['美国',	'印度',	'巴西',	'俄罗斯',	'墨西哥']//x轴标题
          }
        ],
        yAxis : [
          {
              type : 'value'//每一项都是数据
          }
        ],
        series : [
             {
                 name:'港口A',//数据的名字
                 type:'bar',//表示柱状图
                 data:[705282,593698, 446690, 202273, 274139]//数据
             }
        ]
  
        
        /********* End *********/
    });

    </script>
</body>
</html>