insert an echarts china-map, into a floating div with a width of 50%. Please tell me how to make it adaptive.
< div id= "myChart" style= "float: left;width: 50%;" > < / div >
mounted () {
this.drawLine();
},
methods: {
drawLine() {
// domecharts
let myChart = echarts.init(document.getElementById("myChart"))
//
var option = {
title: {
text: "",
textStyle: {
fontSize: 30
},
x: "center"
},
tooltip: {
show: true,
formatter: function(params) {
return params.name + ":" + params.data["value"] + "%"
},
},
visualMap: {
min: 0,
max: 5.5,
left: "left",
top: "bottom",
text: ["%", ""], //
calculable: true,
inRange:{
color:["-sharpffffff","-sharpd00000"]
}
},
series: [{
name: "",
type: "map",
map: "china",
roam: false,
label: {
show: false,
},
data:[
{name: "",value: 5.3 },
{name: "",value: 3.8 },
{name: "",value: 4.6 },
{name: "",value: 3.6 },
{name: "",value: 3.4 },
{name: "",value: 3.2 },
{name: "",value: 1.6 },
{name: "",value: 4.3 },
{name: "",value: 4.1 },
{name: "",value: 2.4 },
{name: "",value: 3.3 },
{name: "",value: 3.0 },
{name: "",value: 1 },
{name: "",value: 3.9 },
{name: "",value: 3.5 },
{name: "",value: 2.0 },
{name: "",value: 2.1 },
{name: "",value: 3.0 },
{name: "",value: 1.2 },
{name: "",value: 3.2 },
{name: "",value: 3.5 },
{name: "",value: 2.5 },
{name: "",value: 4.5 },
{name: "",value: 2.8 },
{name: "",value: 1.8 },
{name: "",value: 3.7 },
{name: "",value: 0.6 },
{name: "",value: 0.4 },
{name: "",value: 3.3 },
{name: "",value: 0.8 },
{name: "",value: 1.9 },
{name: "",value: 0 },
{name: "",value: 0 },
{name: "",value: 0}
]
}, ]
};
myChart.setOption(option)
window.onresize = myChart.resize;
}
}