echart绘图备注

最新推荐文章于 2024-06-21 15:47:42 发布

aeoliancrazy

最新推荐文章于 2024-06-21 15:47:42 发布

阅读量988

点赞数

分类专栏： echart

本文链接：https://blog.csdn.net/aeoliancrazy/article/details/83585785

版权

echart 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

柱状图
HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        #bar1{
            width: 300px;
            height: 200px;
        }
        #bar2{
            width: 600px;
            height: 400px;
        }
    </style>
</head>
<body>
    <div id="bar1"></div>
    <div id="bar2"></div>
    <div id="pie1"></div>
    <div id="line1"></div>
    <script type="text/javascript" src="js/jquery-1.11.3.js"></script>
    <script src="http://echarts.baidu.com/build/dist/echarts.js"></script>
    <script src="bar1.js"></script>
    <script src="pie1.js"></script>
    <script src="line1.js"></script>
</body>
</html>

// 路径配置
require.config({
    paths: {
        echarts: 'http://echarts.baidu.com/build/dist'
    }
});

// 使用
require(
    [
        'echarts',
        'echarts/chart/bar' // 使用柱状图就加载bar模块，按需加载
    ],
    function (ec) {
        // 基于准备好的dom，初始化echarts图表
        var myChart1 = ec.init(document.getElementById('bar1'));
        var myChart2 = ec.init(document.getElementById('bar2'));
        
        option1 = {
    title : {
        text: '单位:万元',
        x:'right',
        textStyle:{
　　　　 fontSize:12
    }

    },
            calculable: false,//柱子拖动属性，如果为true，则柱子可以拖动，并会变成点
            xAxis: [{           //x轴配置
                axisLine: {
                    show: false //x轴坐标线
                },
                axisTick: {
                    show: false  //x轴坐标点
                },
                splitLine: {
                    show: true //x轴分裂线，坐标系系中的背景线
                },

                type: 'category',
                data: ['东西湖', '黄陂', '蔡甸', '汉南', '江夏']
            }],
            yAxis: [{       //y轴配置，与x轴类似
                axisLine: {
                    show: false
                },
                axisTick: {
                    show: false
                },
                splitLine: {
                    show: true
                },
                axisLabel: { //坐标标识(刻度)
                    show: false
                  },
                type: 'value'
            }],
            grid:{          //此属性设置整个canvas与四个边的距离，单位px
                x:25,
                y:20,
                x2:15,
                y2:35,
                borderWidth:1
            },
            series: [{
                barWidth:5, //每个柱子的宽度设置
                itemStyle: {
                    normal: {
                        color: '#0090FE',
                        barBorderRadius:5,//设置柱子的圆角
                        label: {        //在柱子顶部是否显示此柱子的具体
                            show: true, //开启显示
                            position: 'top', //在上方显示
                            textStyle: { //数值样式
                                color: 'black',
                                fontSize: 12
                            }
                        }
                    }
                },
                name: '12312312321321321',
                type: 'bar',
                data: [4.6, 6.9, 9.0, 12.2, 15.7],
                markPoint: {
                    data: []
                },
                markLine: {
                    data: []
                }
            }]
        };
        option2 = {
        	    title : {
        text: '单位:万元',
        x:'right',
        textStyle:{
　　　　 fontSize:12
    }

    },
            calculable: true,
            xAxis: [{
                axisLine: {
                    show: false
                },
                axisTick: {
                    show: false
                },
                splitLine: {
                    show: true
                },

                type: 'category',
                data: ['东西湖', '黄陂', '蔡甸', '汉南', '江夏']
            }],
            yAxis: [{
                axisLine: {
                    show: false
                },
                axisTick: {
                    show: false
                },
                splitLine: {
                    show: true
                },
                axisLabel: { 
                    show: false
                  },
                type: 'value'
            }],
            grid:{
                x:25,
                y:20,
                x2:15,
                y2:35,
                borderWidth:1
            },
            series: [{
                barWidth:5,
                itemStyle: {
                    normal: {
                        color: '#0090FE',
                        barBorderRadius:5,//设置柱子的圆角
                        label: {
                            show: true, //开启显示
                            position: 'top', //在上方显示
                            textStyle: { //数值样式
                                color: 'black',
                                fontSize: 12
                            }
                        }
                    }
                },
                name: '',
                type: 'bar',
                data: [4.6, 6.9, 9.0, 12.2, 15.7],
                markPoint: {
                    data: []
                },
                markLine: {
                    data: []
                }
            }]
        };


        // 为echarts对象加载数据 
        myChart1.setOption(option1);
        myChart2.setOption(option2);
    }
);

aeoliancrazy

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
echart绘图备注

柱状图HTML&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&amp
复制链接

扫一扫

专栏目录