// 第3步: 基于容器，创建一个echarts实例 var myChart = echarts.init(document.getElementById('main'));

// 第4步和第5步可以合并，合并myChart.setOption中的内容即可，如下 $.get('../nCov_data_analysis/province_total.json').done(function (data) { myChart.setOption({ // 设置标题和副标题及副标题跳转链接 title: { text: '新冠病毒疫情病毒(各省确诊病例截止2020.02.13)', subtext: '数据来源--腾讯新闻', sublink: 'https://news.qq.com//zt2020/page/feiyan.htm' }, // 数据提示框 tooltip: { trigger: 'item', // item放到数据区域触发 formatter: '{b}{c} (人)' // 提示数据格式br表示换行，地图 : {a}（系列名称），{b}（区域名称），{c}（合并数值）, {d}（无） }, // 工具栏 toolbox: { show: true, orient: 'horizontal', left: 'right', feature: { dataView: {readOnly: false}, restore: {}, saveAsImage: {} } }, // 视觉映射方案1：,疫情颜色根据传染病疫情等级分类为4机：蓝色-黄色-橙色-红色 // 为了是视觉分布更好，可以添加更多的颜色范围，然后适当调小max的值，因为湖北和后面省份相差太大 // 湖北有几万确诊，其它较严重省份人数在1000多人，max值设置在1500，整个地图颜色变化相对均匀 /*visualMap: { min: 1, // 颜色映射对应的最小值，即对应下面的lightskyblue max: 1500, // 颜色映射对应的最大值，即对应下面的orangered text: ['严重', '一般'], // 映射图上下标记文本 realtime: true, // 是否显示拖拽手柄，映射条可以拖拽调整要映射的范围 calculable: true, // 拖拽时，是否实时更新地图 inRange: { color: ['lightblue', 'yellow', 'orange', 'darkorange', 'red', 'darkred'] // 颜色映射范围，最小值，过渡值，最大值 } },*/

// 视觉映射方案2: // visualMap默认是连续映射，我们也可以设置为分段型，对于分布范围广的数据 // 使用透明度来区分疫情严重情况 visualMap: { type: 'piecewise', pieces: [ {gt: 1500, color: 'darkred'}, // (1500, Infinity] {gt: 1000, lte: 1500, color: 'red', colorAlpha: 1}, // (1000, 1500] {gt: 500, lte: 1000, color: 'red', colorAlpha: 0.8}, {gt: 300, lte: 500, color: 'red', colorAlpha: 0.6}, {gt: 100, lte: 300, color: 'red', colorAlpha: 0.4}, {gt: 50, lte: 100, color: 'red', colorAlpha: 0.3}, {lt: 50, color: 'red', colorAlpha: 0.2} // (-Infinity, 100) ],

},

// 具体数据 series: [ { name: '各省确诊病例', // 系列名称 type: 'map', // 系列类型，地图 map: 'china', // 要使用的地图，即上面注册的地图名称 roam: true, // 开启鼠标缩放和平移漫游 label: { // 图形上的文本标签，地图默认显示数据名 show: true, formatter: '{b}', // b是数据名，c是数据值 fontSize: 12 }, data: [ {name: data['name'][0], value: data['value'][0]}, {name: data['name'][1], value: data['value'][1]}, {name: data['name'][2], value: data['value'][2]}, {name: data['name'][3], value: data['value'][3]}, {name: data['name'][4], value: data['value'][4]}, {name: data['name'][5], value: data['value'][5]}, {name: data['name'][6], value: data['value'][6]}, {name: data['name'][7], value: data['value'][7]}, {name: data['name'][8], value: data['value'][8]}, {name: data['name'][9], value: data['value'][9]}, {name: data['name'][10], value: data['value'][10]}, {name: data['name'][11], value: data['value'][11]}, {name: data['name'][12], value: data['value'][12]}, {name: data['name'][13], value: data['value'][13]}, {name: data['name'][14], value: data['value'][14]}, {name: data['name'][15], value: data['value'][15]}, {name: data['name'][16], value: data['value'][16]}, {name: data['name'][17], value: data['value'][17]}, {name: data['name'][18], value: data['value'][18]}, {name: data['name'][19], value: data['value'][19]}, {name: data['name'][20], value: data['value'][20]}, {name: data['name'][21], value: data['value'][21]}, {name: data['name'][22], value: data['value'][22]}, {name: data['name'][23], value: data['value'][23]}, {name: data['name'][24], value: data['value'][24]}, {name: data['name'][25], value: data['value'][25]}, {name: data['name'][26], value: data['value'][26]}, {name: data['name'][27], value: data['value'][27]}, {name: data['name'][28], value: data['value'][28]}, {name: data['name'][29], value: data['value'][29]}, {name: data['name'][30], value: data['value'][30]}, {name: data['name'][31], value: data['value'][31]}, {name: data['name'][32], value: data['value'][32]}, {name: data['name'][33], value: data['value'][33]} ], } ] }); });