webpack中使用echarts

来源：互联网发布：qt creator 运行c语言编辑：程序博客网时间：2024/06/05 15:49

webpack中使用echarts

1、安装echarts

npm install echarts --save

2、全量引入echarts  
var echarts = require('echarts');
3、按需引入echarts
// 引入 ECharts 主模块
var echarts = require('echarts/lib/echarts');
require("echarts/lib/chart/line");//引入折线图require("echarts/lib/chart/bar");//引入柱状图require("echarts/lib/chart/pie");//引入饼图// 引入提示框和标题组件require('echarts/lib/component/tooltip');//引入提示require('echarts/lib/component/title');//引入标题require('echarts/lib/component/legend');//引入图例
柱状图示例:
<div class="zztChart ui-chart" id="zztChart"></div>
var myChart = echarts.init(document.getElementById('zztChart'));
myChart.setOption({
    title: {
        text: '世界人口总量',
        subtext: '数据来自网络'
    },
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'shadow'
        }
    },
    legend: {
        data: ['2011年', '2012年']
    },
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
    xAxis: {
    type: 'category',
        data: ['巴西','印尼','美国','印度','中国','世界人口(万)']
       
    },
    yAxis: {
         type: 'value',
        boundaryGap: [0, 0.01]
    },
    series: [
        {
            name: '2011年',
            type: 'bar',
            data: [18203, 23489, 29034, 104970, 131744, 630230]
        },
        {
            name: '2012年',
            type: 'bar',
            data: [19325, 23438, 31000, 121594, 134141, 681807]
        }
    ]
});
echarts官网  http://echarts.baidu.com/index.html

阅读全文

0 0