ECharts 入门示例-尝试


1、使用ECharts 需要先导js文件
[mw_shl_code=javascript,true] <script src="echarts.js"></script>[/mw_shl_code]
2、使用Echars 需要准备一个大小适中的DOM
[mw_shl_code=html,true]<div id="main" style="width: 600px;height:400px;"></div>
[/mw_shl_code]
3、先初始化Echars实例[mw_shl_code=applescript,true] var myChart = echarts.init(document.getElementById('main'));[/mw_shl_code]

4、指定图表的配置项和数据[mw_shl_code=javascript,true] var option = {
        title: {
            text: 'ECharts 入门示例-尝试'
        },
        tooltip: {},
        legend: {
            data:['数量',"销量"]
        },
        xAxis: {
            data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子","二狗"]
        },
        yAxis: {},
        series: [{
            name: '数量',
            type: 'bar',
            data: [5, 20, 36, 10, 10, 20,30]
        },{
            name: '销量',
            type: 'bar',
            data: [22, 80, 16, 60, 10, 20,39]
        }]
    };[/mw_shl_code]
5、显示图表
[mw_shl_code=applescript,true] myChart.setOption(option);[/mw_shl_code]

ECharts 入门示例-尝试


1、使用ECharts 需要先导js文件
[mw_shl_code=javascript,true] <script src="echarts.js"></script>[/mw_shl_code]
2、使用Echars 需要准备一个大小适中的DOM
[mw_shl_code=html,true]<div id="main" style="width: 600px;height:400px;"></div>
[/mw_shl_code]
3、先初始化Echars实例[mw_shl_code=applescript,true] var myChart = echarts.init(document.getElementById('main'));[/mw_shl_code]

4、指定图表的配置项和数据[mw_shl_code=javascript,true] var option = {
        title: {
            text: 'ECharts 入门示例-尝试'
        },
        tooltip: {},
        legend: {
            data:['数量',"销量"]
        },
        xAxis: {
            data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子","二狗"]
        },
        yAxis: {},
        series: [{
            name: '数量',
            type: 'bar',
            data: [5, 20, 36, 10, 10, 20,30]
        },{
            name: '销量',
            type: 'bar',
            data: [22, 80, 16, 60, 10, 20,39]
        }]
    };[/mw_shl_code]
5、显示图表
[mw_shl_code=applescript,true] myChart.setOption(option);[/mw_shl_code]