echarts数据缩放小例子

来源：互联网发布：java mysql学生编辑：程序博客网时间：2024/05/16 15:59

前言

这里主要是模仿官网上数据缩放组件的小例子！仅作练习参考之用。废话不多说，测试代码如下

代码演示

至于echarts使用需要用到的js包，可以在官网上找，这里不多说！

<body><!-- 为 ECharts 准备一个具备大小（宽高）的 DOM --><div id="main" style="width: 600px;height:400px;"></div> <script type="text/javascript">        // 基于准备好的dom，初始化echarts实例        var myChart = echarts.init(document.getElementById('main'));        myChart.setOption({            title:{                text:'简单测试数据缩放效果！',                left:'center',                top:'top'            },            xAxis: {                type: 'value'            },            yAxis: {                type: 'value'            },            dataZoom: [                       {                           type: 'slider',                           xAxisIndex: 0,                           start: 10,                           end: 60                       },                       {                           type: 'inside',                           xAxisIndex: 0,                           start: 10,                           end: 60                       },                       {                           type: 'slider',                           yAxisIndex: 0,                           start: 30,                           end: 80                       },                       {                           type: 'inside',                           yAxisIndex: 0,                           start: 30,                           end: 80                       }                   ],               series: [                        {                            type: 'scatter', // 这是个散点图                            itemStyle: {                                normal: {                                    opacity: 0.8    //散点模糊度                                }                            },                            symbolSize: function (val) {                                return val[2] * 40;  //散点大小                                //这里的val[2],指代数组中的第三个数字，如下面的0.896,0.995                            },                            data: [["14.616","7.241","0.896"],["3.958","5.701","0.955"],                                   ["2.768","8.971","0.669"],["9.051","9.710","0.171"],                                   ["14.046","4.182","0.536"],["12.295","1.429","0.962"],                                   ["4.417","8.167","0.113"],["0.492","4.771","0.785"],                                   ["7.632","2.605","0.645"],["14.242","5.042","0.368"]]                        }                    ]        }); </script></body>

演示效果如下
这里写图片描述

总结

这只是模仿官网上的小例子，做练习之用，各位看官轻点喷！

阅读全文

0 0