A股上市公司传智教育(股票代码 003032)旗下技术交流社区北京昌平校区

 找回密码
 加入黑马

QQ登录

只需一步,快速开始

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);

















0 个回复

您需要登录后才可以回帖 登录 | 加入黑马