123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125 |
- <!DOCTYPE>
- <html>
- <head>
- <meta charset="utf-8">
- <script src="lib/esl.js"></script>
- <script src="lib/config.js"></script>
- <script src="lib/jquery.min.js"></script>
- <script src="lib/facePrint.js"></script>
- <meta name="viewport" content="width=device-width, initial-scale=1" />
- <link rel="stylesheet" href="lib/reset.css">
- </head>
- <body>
- <style>
- body {
- }
- #main {
- height: 500px;
- }
- </style>
- <h1>visualMap should not work on area that no data (show show itemStyle color "light blue")</h1>
- <div id="main"></div>
- <script>
- var echarts;
- var colorTool;
- var chart;
- var myChart;
- var groupCategories = [];
- var groupColors = [];
- require([
- 'echarts'
- // 'zrender/tool/color',
- // 'echarts/chart/line',
- // 'echarts/chart/map',
- // 'echarts/chart/line',
- // 'echarts/chart/parallel',
- // 'echarts/component/grid',
- // 'echarts/component/legend',
- // 'echarts/component/tooltip',
- // 'echarts/component/toolbox',
- // 'echarts/component/visualMap'
- ], function (ec) {
- echarts = ec;
- colorTool = echarts.color;
- require(['map/js/china'], function () {
- var chart = echarts.init(document.getElementById('main'));
- option = {
- "tooltip": {
- "trigger": "item",
- "formatter":function(params,ticket,cb){ //自定义显示框
- params.value=params.value||0;
- var contentHTML=params.name+" - "+params.value;
- return contentHTML;
- }
- },
- "visualMap": {
- "min": 0,
- "max": 96.89,
- "left": 20,
- "align": "bottom",
- "type": "piecewise",
- "bottom": 25,
- "text": ["覆盖率(高-低)"],
- "calculable": true,
- "inverse": true,
- "orient": "horizontal",
- "inRange": {
- "color": ["#d1eaff", "#1a96f0"]
- },
- formatter: function (value) {
- return parseInt(value)||0; // 范围标签显示内容。
- }
- },
- "series": [{
- "name": "中国",
- "type": "map",
- "mapType": "china",
- "selectedMode": "multiple",
- "itemStyle": {
- "normal": {
- "areaColor": "#d1eaff",
- "borderColor": "#fff"
- },
- "emphasis": {
- "areaColor": "#f1f5f8"
- }
- },
- "data": [{
- "name": "浙江",
- "value": "96.89"
- }, {
- "name": "unknown",
- "value": "2.67"
- }, {
- "name": "其它",
- "value": "0.44"
- }]
- }]
- }
- chart.setOption(option);
- });
- });
- </script>
- </body>
- </html>
|