扇形图表

最新推荐文章于 2023-01-20 16:03:31 发布

fxqyilu

最新推荐文章于 2023-01-20 16:03:31 发布

阅读量415

点赞数

本文链接：https://blog.csdn.net/fxqyilu/article/details/81389812

版权

最近要用到图表，我就用了echarts插件，这个对我来说真的是长知识了，于是我就认真的学习了一下，顺便把这个图表做做。这个跟官网上教的很像，仅作学习的一个例子。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>扇形图表</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .box{
            text-align: center;
            margin-left: 10%;
        }
        .box .fl{
            float: left;
            width: 40px;
            height: 80px;
            font-weight: 600;
            font-size: 16px;
            line-height: 80px;
            border: 1px solid black;
            border-right: none;
        }
        .box .fr{
            float: left;
            width: 240px;
            height: 80px;
            border: 1px solid black;
        }
        .box .fr .lie span{
            display: block;
            float: left;
            width: 80px;
            height: 40px;
            line-height: 40px;
            border-right:  1px solid black;
            border-bottom: 1px solid black;
            box-sizing: border-box;
        }
        .box .fr .lie span:last-child{
            border-right: none;
        }
        .box .fr .lie2 span{
            border-bottom: none;
        }
    </style>
</head>
<body>
    <div id="qxfl" data-index="1"></div>
    <div id="main" style="width: 600px;height:400px;"></div>
    <div class="box">
        <div class="fl">携程</div>
        <div class="fr">
            <div class="lie"><span>订单数</span><span>平均价</span><span>间夜数</span></div>
            <div class="lie lie2"><span>0</span><span>0</span><span>0</span></div>
        </div>
    </div>
</body>
<script src="js/jquery.min.js"></script>
<script src="js/echarts.common.min.js"></script>
<script src="js/echartsOne.js"></script>
<script type="text/javascript">
    $(function(){
        qxfl('#qxfl');
    });
</script>
</html>

js部分请参考下面。

	 var myChart;

	/*
	* names:门店
	* brower：订单
	* */
	function echartStr(names,brower){
		// 基于准备好的dom，初始化echarts实例
		if (myChart != null && myChart != "" && myChart != undefined) {
	        myChart.dispose();
        }
	    myChart = echarts.init(document.getElementById('main'));		//扇形图表
	    // 指定图表的配置项和数据
	    var option = {
		    tooltip : {
		        trigger: 'item',
		        formatter: "{a} <br/>{b} : {c} ({d}%)"					//显示百分比
		    },
		    legend: {
		        orient: 'vertical',		//图例列表的布局朝向。
		        left: 'right',				//组件位置
		        data: names					//数据
		    },
		    series : [						//系列列表
		        {
		            name: '门店',
		            type: 'pie',
		            radius : '55%',			//扇形大小
		            center: ['50%', '60%'],	//扇形位置
		            data: brower,
		            itemStyle: {
		                emphasis: {
		                    shadowBlur: 10,
		                    shadowOffsetX: 0,
		                    shadowColor: 'rgba(0, 0, 0, 0.5)'
		                }
		            },
		            label: {
	                normal: {
	                    show: false,
	                }
	            },
		        }
		    ]
		};

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);

        myChart.on('click', function (params) {
            // console.log(params);
            var one = true;
            if(one){
            	console.log(params.data.name)
			}
        });
    }

	//缺陷分类
	function qxfl(that){
		var brower = [],
			names = [];
		var index = $(that).data('index');
		$.ajax({
	        type: 'get',
	        url: 'js/echartOne.json',//请求数据的地址
	        dataType: "json",        //返回数据形式为json
	        success: function (result) {
	            //请求成功时执行该函数内容，result即为服务器返回的json对象
	            //'result.list' + index 请求json的其中一个
	            //eval() 将对应的字符串解析成JS代码并运行
	            $.each(eval('result.list' + index), function (index, item) {
	                names.push(item.name);    //挨个取出类别并填入类别数组
	                brower.push({
	                    name: item.name,
	                    value: item.value
	                });
	                // console.log(brower[0].name)
	            });
	            echartStr(names,brower);
	        },
	        error: function (errorMsg) {
	            //请求失败时执行该函数
	            alert("图表请求数据失败!");
	        }
	    });
	}

其实这个插件不难，就是生成的画布样式我还是有些懵，正在研究当中，如果我到时候觉得需要，笔记在补充

fxqyilu

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
扇形图表

最近要用到图表，我就用了echarts插件，这个对我来说真的是长知识了，于是我就认真的学习了一下，顺便把这个图表做做。这个跟官网上教的很像，仅作学习的一个例子。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>扇形图表</...
复制链接

扫一扫