html5柱状图编写、数字提示和单位设置

来源：互联网发布：每日签到送淘宝淘金币编辑：程序博客网时间：2024/06/15 22:03
<!DOCTYPE html><html><head>    <meta charset="UTF-8">    <title>柱状图</title>    <script type="text/javascript" src="../jquery.min.js"></script>    <script type="text/javascript" src="../echarts .js"></script></head><body><!-- 为ECharts准备一个具备大小（宽高）的Dom --><div id="main" style="height:400px;width: 800px"></div><!-- ECharts单文件引入 --><script src="../Vendor/echarts/build/dist/echarts-all.js"></script><script type="text/javascript">    // 基于准备好的dom，初始化echarts图表    var myChart = echarts.init(document.getElementById("main"));    var option = {//        头部        title: {            text: ''        },//        居中的标题        legend: {            data:['配水量','用水量']        },//    控住状图的颜色        color: ['#9BB1DB',"#559CDB"],        tooltip : {            trigger: 'axis',            axisPointer : {            // 坐标轴指示器，坐标轴触发有效                type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'            }        },        grid: {            left: '3%',            right: '4%',            bottom: '3%',            containLabel: true        },        xAxis : [            {                type : 'category',                data : ['2010', '2011', '2012', '2013', '2014', '2015', '2016'],                axisTick: {                    alignWithLabel: true                },                //        显示单位                axisLabel : {                    show:true,                    interval: 'auto',    // {number}//            rotate: 45,//            margin: 8,                    formatter: '{value}年',                    /* textStyle: {                     color: 'blue',                     fontFamily: 'sans-serif',                     fontSize: 15,                     fontStyle: 'italic',                     fontWeight: 'bold'                     }*/},            }        ],        yAxis : [            {                type : 'value',                //        显示单位                axisLabel : {                    show:true,                    interval: 'auto',    // {number}                    formatter: '{value}t',            }            }        ],        series : [            {                name:'用水量',                type:'bar',                barWidth: '30%',                label: {                    normal: {                        show: true,                        position: 'top'                    }                },                data:[20, 22, 100, 234, 290, 230, 420]            } ,            {                name:'配水量',                type:'bar',                barWidth: '30%',                label: {                    normal: {                        show: true,                        position: 'top'                    }                },                data:[10, 52, 200, 334, 390, 330, 220]            },        ]   ,    };    // 为echarts对象加载数据    myChart.setOption(option);    }</script></body></html>
1 0