Adaptive icons in echart_map of China

Install echart

npm install echarts -S

Quoting echart

在main.js中
import echarts from 'echarts'

Use echart

1.  var chart = echarts.init(document.getElementById('ec_map'));
2.  var option = {
        title: {
            text: 'ECharts 入门示例'
        },
        tooltip: {},
        legend: {
            data:['销量']
        },
        xAxis: {
            data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
        },
        yAxis: {},
        series: [{
            name: '销量',
            type: 'bar',
            data: [5, 20, 36, 10, 10, 20]
        }]
    };

    // 使用刚指定的配置项和数据显示图表。
    chart.setOption(option);

    //让表格自适应(好像echart不支持把百分百或者rem写在html标签上）
    document.getElementById('ec_map').style.width = "100%";
    document.getElementById('ec_map').style.height = "7.61rem";
    setTimeout(function () {
        chart.resize();
    },100)

Redraw table

window.onresie = function(){
    document.getElementById('ec_map').style.width = "100%";
    document.getElementById('ec_map').style.height = "7.61rem";
    setTimeout(function () {
        chart.resize();
    },100)
}

Give a complicated plum :

Thanks to the beautiful plums in the echart official website community

echart official website community

This is a component in vue-cli

effect