中国のechart_mapのアダプティブアイコン

echartをインストールします

npm install echarts -S

echartの引用

在main.js中
import echarts from 'echarts'

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)

テーブルを再描画します

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

複雑な梅を与える：

echart公式ウェブサイトコミュニティの美しいプラムに感謝します

echart公式ウェブサイトコミュニティ

これはvue-cliのコンポーネントです

効果