通用配置 toolbox

最新推荐文章于 2024-05-16 10:06:47 发布

生活热爱就好

最新推荐文章于 2024-05-16 10:06:47 发布

阅读量1.1k

点赞数

分类专栏：数据可视化文章标签： echarts 前端 javascript

本文链接：https://blog.csdn.net/qq_41891425/article/details/121190598

版权

数据可视化专栏收录该内容

13 篇文章 1 订阅

订阅专栏

toolbox:ECharts提供的工具栏
toolbox配置在option子元素
显示工具栏按钮feature
内置有导出图片saveAsImage，数据视图dataView，动态类型切换magicType，数据区域缩放dataZoom，重置restore五个工具
在这里插入图片描述

 <!-- 
    1.ECharts最基本的代码结构
    2.x轴数据：['张三'，‘李四’，‘王五’，‘闰土’，‘小明’，‘茅台’，‘二妞’，‘大强’]
    3.y轴数据：[88,92,63,77,94,80,72,86]
    4.将type的值设置为bar
     -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
     <script src="lib/echarts.min.js"></script>
     
   
</head>
<body>
    <div style="width: 600px;height: 400px;"></div>
    <script>
        var mCharts= echarts.init(document.querySelector('div'))
        var xDataArr=['张三','李四','王五','闰土','小明','茅台','二妞','大强']
        var yDaraArr=[70,92,85,89,77,90,87,98]
        var  option={
            title:{
                text:'成绩展示',
                textStyle:{
                    color:'blue'
                },
                borderWidth:5,
                borderColor:'blue',
                borderRadius:5,
                left:30,
                top:10
            },
            tooltip:{
                trigger:'axis',
                triggerOn:'click',
              //  formatter:'{b}的成绩时{c}'
                formatter:function(arg){
                   
                    return arg[0].name+'的分数是'+arg[0].data
                }
            },
            toolbox:{
                feature:{
                    saveAsImage:{},//导出图片
                    dataView:{}, //数据视图
                    restore:{} , //数据重置（还原）
                    dataZoom:{},   //区域缩放
                    magicType:{//图表切换
                        type:['bar','line']
                    }  
                }
            },
           xAxis:{
               type:'category'  ,//类目轴
               data:xDataArr
               
           },
           yAxis:{
               type:'value'  ,//数值轴
              
           },
           series:[
               {
                   name:'语文',
                   type:'bar',   //bar是柱状图，line是线状，pie是饼状
                   markPoint:{   
                       data:[
                         {
                             type:'max',name:'最大值'
                         },{
                           type:'min',name:'最小值'
                         }
                      ]
                    },
                   markLine:{
                       data:[
                           {
                               type:'average',name:'平均值'
                           }
                       ]
                    },
                   label:{
                       show: true,
                       position:'top'
                    },

                       
                    barWidth:'30%',
                   data:yDaraArr
               }
           ]
        }
        //步骤5：将配置项设置给echarts实例对象  
        mCharts.setOption(option) 
     </script>

</body>
</html>

生活热爱就好

关注

0
点赞
踩
6

收藏

觉得还不错? 一键收藏
打赏
0
评论
通用配置 toolbox

toolbox:ECharts提供的工具栏toolbox配置在option子元素显示工具栏按钮feature内置有导出图片saveAsImage，数据视图dataView，动态类型切换magicType，数据区域缩放dataZoom，重置restore五个工具
复制链接

扫一扫