About visualizing large screens using Echarts

This is the second day of my participation in Gwen challenge:More article challenges

Following the last article, we received a demand to display a national data on a large visual screen, similar to the epidemic map made by a treasure, as shown in the figure below

Start coding

Firstly, echarts.min.js in the official Echarts text is introduced, and then a China. js is introduced to show the region where the whole country is located. It is important to note that the file order in which JS is introduced (I’m introducing the old version of Echarts here, I started with version 5.0 and there was a pit in the writing process) is replaced with the old version of Echarts

Initialize echarts first (only the JS part is written here by default)

var myChart = echarts.init(document.getElementById('main'));

var dataList =[]; The regional data that's in here

Next comes the core of implementing maps

'visualMap: {min: 0, // min Max: 3000, // Max text: ['3000', '0'], realTime: false, calculable: false, inRange: {color: ['#8bd4ff', '# 0050B3 '] // Left navigation bar gradient color}, show: true, textStyle: {color: "# FFF "}, geo: {// map: 'China ', label: {normal: {show: true, fontSize: '12', color: '#770000'}}, itemStyle: BorderColor: '#1f9bd4', // area borderColor}, emphasis: {borderWidth:.5, // area borderColor}, emphasis: {borderWidth:.5, // area borderColor}, emphasis: .5, // borderColor: '#000', // borderColor: "#fff100",// mouse select areaColor}},}, series: [// series list. (chart) {name: // Map type geoIndex: 0, mapType: 'China ', data: dataList,// map type geoIndex: 0, mapType:' China ', data: dataList {fontSize: 13, fontWeight: 'bold', color: 'red'}}, Emphasis: {// corresponding mouse hover effect show: true, textStyle: {color: black; "#000"}}},},]} 'Copy the code

Tooltip: {// Prompt box component formatter: function (params, ticket, callback) {// Prompt box float content formatter, supporting both string templates and callback functions. Return params.name + ':' + params.value}// Data formatting},

I'm using the custom prompt component here because it's needed in the project, but it can also be written by defaultCopy the code
tooltip: {
            trigger: 'item'}, the height of the HTML div must be paid attention to; The problem is that the height of the map is not consistent with my DIV, and the fit is not good. Also, the latest Echarts does not show the data in the delimit map, which is not carefully studied. That's all I have to say about writing the new Echarts Tooltip. If there are any mistakes, please feel free to comment and explain why the latest Echarts tooltip doesn't work.Copy the code