Bootstrap

echarts图形的参数设置和图形大小调整，map地图的中心坐标点修改。 

<body>
    <!-- 饼图图形 -->
    <div id="pie"></div>
    <!-- 柱状图图形 -->
    <div id="bar"></div>
    <!-- 折线图图形 -->
    <div id="line"></div>
    <!-- 柱状折线图形 -->
    <div id="barLine"></div>
    <!-- 玫瑰图形 -->
    <div id="rosePie"></div>
   
</body>

 <style>
     #pie,#bar,#line,#barLine,#rosePie{
           width: 80%;
           height: 600px;
           margin: 0 auto;
           margin-bottom: 5%;
       }
   </style>

<script>//https://echarts.apache.org/zh/index.html
    var pie = echarts.init(document.getElementById('pie'))  //饼图
    pie.setOption({
        // backgroundColor:'#FFFFE0', //整个图形的颜色
        title: {
            text: '某站点用户访问来源',
            subtext: '纯属虚构',
            left: 'center'
        },
        tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b} : {c} ({d}%)',
           backgroundColor: 'rgba(255,0,255,0.7)',//鼠标移入显示框背景颜色
            textStyle: {
               color: 'yellow', //字体颜色
                decoration: 'none',
                fontFamily: 'Verdana, sans-serif',
               fontSize: 14, //字体大小
                fontStyle: 'italic',
                fontWeight: 'bold'
           },
        },
        legend: {
            orient: 'vertical',
            left: 'left',
            data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎'],
           
        },
        toolbox: {  //下载，数据视图，小图标
            show: true,
            feature: {
                mark: { show: true },
                dataZoom: {   //区域宿放
                    yAxisIndex: 'none'
                },
                dataView: { show: true, readOnly: false },//数据视图工具，可以展现当前图表所用的数据，编辑后可以动态更新。
                magicType: {
                    show: true,
                    type: ['pie', 'funnel'] //动态类型切换 
                },
                restore: { show: true }, //配置项还原。
                saveAsImage: { show: true }, //保存为图片。
                itemSize: 10, //工具栏 icon 的大小。
                itemGap: 10,
            }
        },
        label: {
            normal: {
                show: true,
                textStyle: {
                    fontSize: 14,//图形文字的大小
                }
            },
            emphasis: {
                show: true
            }
        },
       
        series: [
            {
                name: '访问来源',
                type: 'pie',
                radius: '25%',//图形大小调整
                center: ['50%', '50%'],//图形垂直居中
                data: [
                    { value: 335, name: '直接访问' },
                    { value: 310, name: '邮件营销' },
                    { value: 234, name: '联盟广告' },
                    { value: 135, name: '视频广告' },
                    { value: 1548, name: '搜索引擎' }
                ],
                // x: '30%',
                // y:'30%',
                emphasis: {
                    itemStyle: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                },
                label: {
                    normal: {
                        show: true,
                        textStyle: {
                           fontSize: 18
                        }
                    },
                    emphasis: {
                       show: true
                    }
                },
                lableLine: {
                    normal: {
                        show: true
                    },
                    emphasis: {
                        show: true
                    }
                }
            }
        ]
    });

    // "properties": {  //地图图形中心坐标点修改
	// 		"cp": [118.089421, 25.308853],   //改的就是这一块
	// 		"name": "泉州市",
    // 	}
    //柱状图形
    var bar = echarts.init(document.getElementById('bar'));
    bar.setOption({
        title: {
          text:'柱状图形',  
          x:'center',
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
            }
        },
        legend: {
            data: ['直接访问', '邮件营销',  '搜索引擎',  '谷歌'],
            top:'5%',
            right:'0',   //
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis: [
            {
                type: 'category',
                data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
            }
        ],
        yAxis: [
            {
                type: 'value'
            }
        ],
        series: [
            {
                name: '直接访问',
                type: 'bar',
                data: [320, 332, 301, 334, 390, 330, 320],
                itemStyle : { 
                    normal: {
                        label : {show: true},
                       // position: 'top', //在上方显示
                        textStyle: { //数值样式
                            color: 'black',
                            fontSize: 16
                        }
                    }
                } // 显示数值
            },
            {
                name: '邮件营销',
                type: 'bar',
                stack: '广告',
                data: [120, 132, 101, 134, 90, 230, 210],
                itemStyle : { 
                normal: {
                    label : {show: true},
                    //position: 'top', //在上方显示
                    textStyle: { //数值样式
                         color: '#333',
                        fontSize: 16
                    }
                }
            } // 显示数值
            },
            // {
            //     name: '联盟广告',
            //     type: 'bar',
            //     stack: '广告',
            //     data: [220, 182, 191, 234, 290, 330, 310]
            // },
            // {
            //     name: '视频广告',
            //     type: 'bar',
            //     stack: '广告',
            //     data: [150, 232, 201, 154, 190, 330, 410]
            // },
            {
                name: '搜索引擎',
                type: 'bar',
                data: [862, 1018, 964, 1026, 1679, 1600, 1570],
                // markLine: {
                //     lineStyle: {
                //         type: 'dashed'
                //     },
                //     data: [
                //         [{type: 'min'}, {type: 'max'}]
                //     ]
                // },
                itemStyle : { 
                    normal: {
                        label : {show: true},
                        //position: 'top', //在上方显示
                        textStyle: { //数值样式
                            color: 'black',
                            fontSize: 16
                        }
                    }
                } // 显示数值
            },
            // {
            //     name: '百度',
            //     type: 'bar',
            //     barWidth: 5,   //柱状柱子的宽度设置
            //     stack: '搜索引擎',
            //     data: [620, 732, 701, 734, 1090, 1130, 1120]
            // },
            {
                name: '谷歌',
                type: 'bar',
                stack: '搜索引擎',
                data: [120, 132, 101, 134, 290, 230, 220],
                itemStyle : { 
                    normal: {
                        label : {show: true},
                       // position: 'top', //在上方显示
                        top:'0',
                        textStyle: { //数值样式
                            color: '#333',
                            fontSize: 16
                        }
                    }
                } // 显示数值
            },
           
        ]
    });
//折线图
var line= echarts.init(document.getElementById('line'));
line.setOption({
    title: {  //标题
        text: '折线图堆叠',
        x:'center', //title居中
        
    },
    tooltip: { //鼠标移入事件
        trigger: 'axis'
    },
    legend: {  //
        data: ['邮件营销', '联盟广告', '视频广告', '直接访问', '搜索引擎'],
        right:'0',
        top:'5%'
    },
    grid: {  //图形距离上，下，，左，右调节
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
    toolbox: {  //数据视图小图标
        feature: {
            saveAsImage: {}
        },
        left:'5%'
    },
    xAxis: { //x轴
        type: 'category',
        boundaryGap: false,
        data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
    },
    yAxis: { //y轴
        type: 'value'
    },
    series: [  //数据
        {
            name: '邮件营销',
            type: 'line', //设置类型，有折线，柱状，饼图，
            stack: '总量',
            data: [120, 132, 101, 134, 90, 230, 210],
            itemStyle : { 
                normal: {
                    label : {show: true}
                }
            } // 显示数值
        },
        {
            name: '联盟广告',
            type: 'line',
            stack: '总量',
            data: [220, 182, 191, 234, 290, 330, 310],
            itemStyle : { 
                normal: {
                    label : {show: true}
                }
            } // 显示数值
        },
        {
            name: '视频广告',
            type: 'line',
            stack: '总量',
            data: [150, 232, 201, 154, 190, 330, 410],
            itemStyle : { 
                normal: {
                    label : {show: true}
                }
            } // 显示数值
        },
        {
            name: '直接访问',
            type: 'line',
            stack: '总量',
            data: [320, 332, 301, 334, 390, 330, 320],
            itemStyle : { 
                normal: {
                    label : {show: true}
                }
            } // 显示数值
        },
        {
            name: '搜索引擎',
            type: 'line',
            stack: '总量',
            data: [820, 932, 901, 934, 1290, 1330, 1320],
            itemStyle : { 
                normal: {
                    label : {show: true}
                }
            } // 显示数值
        }
    ]
});
//柱状折线图
var barLine = echarts.init(document.getElementById('barLine'));
barLine.setOption({
    title:{
      text:'柱状折线图',
      x:'center',
    },
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'cross',
            crossStyle: {
                color: '#999'
            }
        }
    },
    toolbox: {
        feature: {
            dataView: {show: true, readOnly: false},
            magicType: {show: true, type: ['line', 'bar']},
            restore: {show: true},
            saveAsImage: {show: true}
        },
        left:'5%'

    },
    // grid: {  
    //     left: '10%',  
    //     bottom:'35%'  
    // }, 
    legend: {
        data: ['蒸发量', '降水量', '平均温度'],
        top:'5%',
    },
    xAxis: [
        {
            type: 'category',
            data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
            axisPointer: {
                type: 'shadow'
            },
            splitLine:{
　　　　       show:false  //去掉背景网格线
　　        },
            axisLabel: {  
                interval:0,  
                rotate:40  //x轴的倾斜度
            } 
        }
    ],
    yAxis: [
        {
            type: 'value',
            name: '水量',
            min: 0,
            max: 250,
            interval: 50,
            axisLabel: {
                formatter: '{value} ml'
            }
        },
        {
            type: 'value',
            name: '温度',
            min: 0,
            max: 25,
            interval: 5,
            axisLabel: {
                formatter: '{value} °C'
            }
        }
    ],
    series: [
        {
            name: '蒸发量',
            type: 'bar',
            data: [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3],
            itemStyle : { 
                normal: {
                    label : {show: true},
                    position: 'top', //在上方显示
                    textStyle: { //数值样式
                        color: 'black',
                        fontSize: 16
                    }
                }
            } // 显示数值
        },
        {
            name: '降水量',
            type: 'bar',
            data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3],
            itemStyle : { 
                normal: {
                    label : {show: true},
                    position: 'top', //在上方显示
                    textStyle: { //数值样式
                        color: 'black',
                        fontSize: 16
                    }
                }
            } // 显示数值
          
        },
        {
            name: '平均温度',
            type: 'line',
            yAxisIndex: 1,
            data: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2],
            itemStyle : { 
                normal: {
                    label : {show: true},
                   
                }
            } // 显示数值
           
        }
    ]
})
//南丁格尔玫瑰图
var rosePie = echarts.init(document.getElementById('rosePie'));
rosePie.setOption({
    title: {
        text: '南丁格尔玫瑰图',
        subtext: '纯属虚构',
        left: 'center'
    },
    tooltip: {
        trigger: 'item',
        formatter: '{a} <br/>{b} : {c} ({d}%)'
    },
    legend: {
        //show:false, //显示 true 隐藏false
        left: 'center',
         top: '15%',
        data: ['教育支出', '农林水支出', '卫生健康支出', '住房保障支出', '节能环保支出', '交通运输支出', '科学技术支出', '社会保障和就业支出']
    },
    toolbox: {
        show: true,
        feature: {
            mark: {show: true},
            dataView: {show: true, readOnly: false},
            magicType: {
                show: true,
                type: ['pie', 'funnel']
            },
            restore: {show: true},
            saveAsImage: {show: true}
        }
    },
    series: [
       
        {
            name: '面积模式',
            type: 'pie',
            radius: [30,'50%'], //30, 110
            //  center: ['50%', '50%'],
                 roseType: 'area', //所有扇区圆心角相同，仅通过半径展现数据大小。
          // roseType: 'radius',//扇区圆心角展现数据的百分比，半径展现数据的大小
            data: [
                {value: 10, name: '教育支出'},
                {value: 5, name: '农林水支出'},
                {value: 15, name: '卫生健康支出'},
                {value: 25, name: '住房保障支出'},
                {value: 20, name: '节能环保支出'},
                {value: 35, name: '交通运输支出'},
                {value: 30, name: '科学技术支出'},
                {value: 40, name: '社会保障和就业支出'}
            ]
        }
    ]
})

</script>

悦读

道可道，非常道；名可名，非常名。 无名，天地之始，有名，万物之母。 故常无欲，以观其妙，常有欲，以观其徼。 此两者，同出而异名，同谓之玄，玄之又玄，众妙之门。

最新收录
mybatis concat
PostgreSQL csvlog 源码字段分析记录
Python毕业设计 大数据招聘网站爬取与数据分析可视化 - flask
接口优化----Redis预减库存，内存标记
什么是网络安全?一文了解网络安全究竟有多重要!
新版Spring Security6.2 - Digest Authentication
docker启动命令,docker重启命令,docker关闭命令
【算法-回溯法】N皇后问题
HC-SR04超声波测距模块介绍
分享一些基于php商城案例
;