ECharts 入门示例-尝试


1、使用ECharts 需要先导js文件

[JavaScript] 纯文本查看 复制代码

 <script src="echarts.js"></script>

2、使用Echars 需要准备一个大小适中的DOM

[HTML] 纯文本查看 复制代码

<div id="main" style="width: 600px;height:400px;"></div>

3、先初始化Echars实例

[AppleScript] 纯文本查看 复制代码

 var myChart = echarts.init(document.getElementById('main'));

4、指定图表的配置项和数据

[JavaScript] 纯文本查看 复制代码

 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]
        }]
    };

5、显示图表

[AppleScript] 纯文本查看 复制代码

 myChart.setOption(option);

ECharts 入门示例-尝试


1、使用ECharts 需要先导js文件

[JavaScript] 纯文本查看 复制代码

 <script src="echarts.js"></script>

2、使用Echars 需要准备一个大小适中的DOM

[HTML] 纯文本查看 复制代码

<div id="main" style="width: 600px;height:400px;"></div>

3、先初始化Echars实例

[AppleScript] 纯文本查看 复制代码

 var myChart = echarts.init(document.getElementById('main'));

4、指定图表的配置项和数据

[JavaScript] 纯文本查看 复制代码

 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]
        }]
    };

5、显示图表

[AppleScript] 纯文本查看 复制代码

 myChart.setOption(option);