1. 程式人生 > >在webpack中如何引用echarts

在webpack中如何引用echarts

1、首先百度搜索echarts進入官網
2、點選上面導航條中文件裡的教程
3、在左邊目錄中找到第三個在 webpack 中使用 ECharts
4、首先在小黑窗中用npm安裝echarts外掛
5、將下面這一段程式碼複製到要實現效果的那個頁面(元件)中(注:此程式碼外要用methods包住):

// 基於準備好的dom,初始化echarts例項
var myChart = echarts.init(document.getElementById('main'));
// 繪製圖表
myChart.setOption({
    title: {
        text: 'ECharts 入門示例'
    },
    tooltip: {},
    xAxis: {
        data: ['襯衫', '羊毛衫', '雪紡衫', '褲子', '高跟鞋', '襪子']
    },
    yAxis: {},
    series: [{
        name: '銷量',
        type: 'bar',
        data: [5, 20, 36, 10, 10, 20]
    }]
});

6、如果想要實現更多效果的話 就在上面的導航條中點選例項中的官方例項,找到並進入想要實現的那個效果圖內,將option裡面的東西複製到剛剛的myChart.setOption方法裡面即可。