Echarts柱状图-阿里云开发者社区

Echarts柱状图

2016-05-19 3041

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介：

[html]view plain copy 
 print?
<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="utf-8" />  
    <title>ECharts-基本线性图及其配置要求</title>  
    <script src="js/esl.js" type="text/javascript"></script>  
</head>  
<body>  
    <div id="main" style="height: 400px; border: 1px solid #ccc; padding: 10px;">  
    </div>  
    <script type="text/javascript" language="javascript">  
        // 按需加载  
        // Step:3 conifg ECharts's path, link to echarts.js from current page.  
        // Step:3 为模块加载器配置echarts的路径，从当前页面链接到echarts.js，定义所需图表路径  
        require.config({  
            paths: {  
                echarts: './js/echarts' //echarts.js的路径  
            }  
        });  
        // Step:4 require echarts and use it in the callback.  
        // Step:4 动态加载echarts然后在回调函数中开始使用，注意保持按需加载结构定义图表路径  
        require(  
        [  
            'echarts',  
            'echarts/chart/bar'  
        ],  
        //回调函数  
        DrawEChart  
        );  
  
        //渲染ECharts图表  
        function DrawEChart(ec) {  
            //图表渲染的容器对象  
            var chartContainer = document.getElementById("main");  
            //加载图表  
            var myChart = ec.init(chartContainer);  
            myChart.setOption({  
                tooltip : {  
        trigger: 'axis',  
        axisPointer : {            // 坐标轴指示器，坐标轴触发有效  
            type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'  
        }  
    },  
    legend: {  
        data:['新闻', '论坛','博客','微博']  
    },  
    toolbox: {  
        show : true,  
        feature : {  
            mark : {show: true},  
            dataView : {show: true, readOnly: false},  
            magicType : {show: true, type: ['line', 'bar', 'stack', 'tiled']},  
            restore : {show: true},  
            saveAsImage : {show: true}  
        }  
    },  
    calculable : true,  
    xAxis : [  
        {  
            name : '数量',  
            type : 'value'  
        }  
    ],  
    yAxis : [  
        {  
            name : '关键词',  
            type : 'category',  
            data : ['关键词1','关键词2','关键词2']  
        }  
    ],  
    series : [  
        {  
            name:'新闻',  
            type:'bar',  
            stack: '总量',  
            itemStyle : { normal: {label : {show: true, position: 'insideRight'}}},  
            data:[320, 302, 301]  
        },  
        {  
            name:'论坛',  
            type:'bar',  
            stack: '总量',  
            itemStyle : { normal: {label : {show: true, position: 'insideRight'}}},  
            data:[120, 132, 101]  
        },  
        {  
            name:'博客',  
            type:'bar',  
            stack: '总量',  
            itemStyle : { normal: {label : {show: true, position: 'insideRight'}}},  
            data:[220, 182, 191]  
        },  
        {  
            name:'微博',  
            type:'bar',  
            stack: '总量',  
            itemStyle : { normal: {label : {show: true, position: 'insideRight'}}},  
            data:[150, 212, 201]  
        },  
         
    ]  
        });  
        }  
    </script>  
</body>  
</html>  

Echarts柱状图

热门文章

最新文章

相关电子书