码迷,mamicode.com
首页 > 其他好文 > 详细

Echarts柱状图

时间:2014-10-30 13:37:56      阅读:194      评论:0      收藏:0      [点我收藏+]

标签:echarts柱状图

<!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>

bubuko.com,布布扣

Echarts柱状图

标签:echarts柱状图

原文地址:http://blog.csdn.net/benjamin_whx/article/details/40617773

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!