最近,大家對于疫情的關注度越來越高,那么,如何簡單、直觀地獲取有關疫情的信息呢?Echarts就可以幫助我們實現這樣的功能。下面,就讓我們一起來看看Echarts中的Json湖北數據。
var data = [ { name: '武漢市', value: 715 }, { name: '黃石市', value: 36 }, { name: '十堰市', value: 35 }, { name: '宜昌市', value: 64 }, { name: '襄陽市', value: 45 }, { name: '鄂州市', value: 29 }, { name: '荊門市', value: 29 }, { name: '孝感市', value: 33 }, { name: '荊州市', value: 74 }, { name: '黃岡市', value: 126 }, { name: '咸寧市', value: 34 }, { name: '隨州市', value: 22 }, { name: '恩施土家族苗族自治州', value: 24 }, { name: '仙桃市', value: 9 }, { name: '天門市', value: 6 }, { name: '潛江市', value: 10 }, { name: '神農架林區', value: 0 } ];
上述代碼中,我們通過定義一個包含各市州名稱和確診人數的數組,并使用name
和value
標記各個鍵值對,然后可以輕松地將數據加載到Echarts中,讓我們更好地了解疫情的情況。
除了數據的定義,我們還需要注意編寫樣式,讓圖表更加美觀,下面是一段添加樣式的代碼:
option = { title: { text: '湖北省疫情地圖', subtext: '數據截止時間:2020.2.17', left: 'center' }, tooltip: { trigger: 'item' }, visualMap: { min: 0, max: 1000, left: 'left', top: 'bottom', text: ['高', '低'], // 文本,默認為數值文本 calculable: true }, series: [ { name: '確診數', type: 'map', mapType: '湖北', roam: false, label: { normal: { show: true }, emphasis: { show: true } }, data: data } ] };
通過上述代碼,我們可以看到,通過設置標題、提示框、視覺映射和數據等各種屬性,我們可以輕松地創建并呈現一個完整的Echarts圖表,這樣,我們可以更好地了解疫情的情況,從而采取更加有針對性的防護措施,保護自己和家人的健康。
上一篇vue寫公共函數
下一篇python 類定義常量