笔记：Echarts

来源：互联网发布：java语言精粹 pdf 编辑：程序博客网时间：2024/06/07 08:21
<!DOCTYPE html><html><head>    <meta charset="UTF-8">    <title>echarts-多柱子柱状图</title>    <style>        body, html {            width: 100%;            height: 100%;        }        .section {            width: 915px;            border: 1px solid #ccc;        }        #barsDemo {            width: 100%;            height: 400px;        }    </style></head><body><div class="section">    <div id="barsDemo"></div></div><script src="js/jquery-3.2.1.min.js"></script><script src="js/echarts.min.js"></script><script>    $(function () {        initData();    });    //生成数据    function initData() {        var legendData = ['甲', '乙','丙'];        var bgColorList = ['#FBB730', '#31BDF2','#6197fb'];        var axisLabel = ['化学', '数学', '地理', '物理', '英语', '音乐', '语文', '历史', '美术', '生物', '信息技术', '政治', '体育'];        var seriesValue = [];        for (var i = 0; i < legendData.length; i++) {            var arrData = [];            var seriesDataVal = null;            for (var j = 0; j < axisLabel.length; j++) {                arrData.push(Math.floor(Math.random() * 100));            }            seriesDataVal = {                barWidth: 10,//柱状条宽度                name:legendData[i],                type:'bar',                itemStyle: {                    normal: {                        show: true,//鼠标悬停时显示label数据                        barBorderRadius: [10, 10, 10, 10],//柱形图圆角，初始化效果                         color: bgColorList[i]                    }                },                label: {                    normal: {                        show: true, //显示数据                        position: 'top'//显示数据位置 'top/right/left/insideLeft/insideRight/insideTop/insideBottom'                    }                } ,                data:arrData            };            seriesValue.push(seriesDataVal);        }        buildChart(legendData, axisLabel, seriesValue);    }    //生成Echarts图形    function buildChart(legendData, axisLabel, seriesValue) {        var chart = document.getElementById('barsDemo');        var echart = echarts.init(chart);        var option = {            title: {                text: "学科兴趣倾向分析",//正标题                x: "center", //标题水平方向位置                y: "0", //标题竖直方向位置                textStyle: {                    fontSize: 18,                    fontWeight: 'normal',                    color: '#666'                }            },            tooltip: {                trigger: 'axis',                axisPointer: {                    type: 'shadow'//阴影，若需要为直线，则值为'line'                }            },            toolbox: {                show: true,                feature: {                    saveAsImage: {show: true}                }            },            legend: {                data: legendData,                y: 'bottom'//图例说明文字设置            },            grid: {                left: '3%',                right: '4%',                bottom: '10%',                top:'10%',                containLabel: true            },            xAxis: [{                min: 0,                type: 'category', //纵向柱状图，若需要为横向，则此处值为'value'， 下面 yAxis 的type值为'category'                data: axisLabel            }],            yAxis: [{                min: 0,                type: 'value',                splitArea: {show: false}            }],            label: {                normal: { //显示bar数据                    show: true,                    position: 'top'                }            },            series: seriesValue        };        echart.setOption(option);    }</script></body></html>
效果图：
这里写图片描述
阅读全文
0 0