echarts和Vue的文本格式差不多首先也是需要一个容器
在这里还是使用“app”来进行存放
下面这是使用echarts来写中国地图上每个地区确诊和死亡的人数
<div id="app">
<div id="main" style="width: 800px;height:600px;"></div>
</div>
这是body部分
主要使用来放地图的你可以对其进行大小的设置
还是老样子你得引入
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.19.2/axios.min.js"></script>
同时你还得下一个map库
<script src="./js/echarts.min.js"></script>
想要的可以直接加我qq2627412312直接给你发一份，可以一块交流学习
<script type="text/javascript">
new Vue({
el: "#app",
data() {
return {
}
},
mounted() {
this.initChart()
},
methods: {
initChart() {
var myChart = echarts.init(document.getElementById('main'));
myChart.on('click', function (params) {
location.href = 'anhui.html'
});
let option = {
visualMap: {
type: "piecewise",
dimension: 0,
这部分是设置一个颜色让不同的地区出现颜色
pieces: [
{ gte: 1000, label: '大于1000人', color: '#990033' },
{ gte: 100, lt: 1000, label: '100~1000人', color: '#FF0033' },
{ gte: 10, lte: 100, label: '10~100人', color: '#FF6666' },
{ lt: 10, label: '少于10人', color: '#FFCCCC' }
]
},
tooltip: {
formatter(data) {
let m1 = `
<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:green;"></span>`
return data.name + '<br>' + data.marker + '确诊人数:' + data.value + "<br>" + m1 + "死亡数:" + data.data.value[1]
}
},
series: [{
type: 'map',
map: 'china',
data: getAreaStat.map(r => ({
name: r.provinceShortName,
value: [r.confirmedCount, r.deadCount]
}))
}]
}
myChart.setOption(option);
}
},
})
</script>
