echarts混合图、省份地图、中国地图、环形图

最新推荐文章于 2024-05-26 21:47:39 发布

最初的倔强

最新推荐文章于 2024-05-26 21:47:39 发布

阅读量702

点赞数 1

分类专栏：工作实践技术文章标签：数据可视化 html

本文链接：https://blog.csdn.net/qq_34042417/article/details/106444726

版权

最近工作上用到的几种echarts图表样例，在此记录下：<!DOCTYPE html><html lang="en"><head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>echarts环形图</title> <style type="text/css" media="screen"&...

摘要由CSDN通过智能技术生成

最近工作上用到的几种echarts图表样例，在此记录下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>echarts环形图</title>

    <style type="text/css" media="screen">

    </style>
</head>
<body>
<div id="charts-div" style="width: 1000px; height: 600px; float: left; border: 1px solid #ccc;"></div>

</body>
<script src="js/jquery/jquery.js"></script>
<script src="js/echarts4.7/echarts.min.js"></script>
<script>

    var myChart3 = echarts.init(document.getElementById('charts-div'));
    var option = {
        tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b}: {c} ({d}%)'
        },
        legend: {
            orient: 'horizontal',
            // bottom: 10,//距离底部的距离（可以是数值或百分比）
            top: '70%',
            width: '300',
            data: ['直接访问1', '直接访问2', '直接访问345678', '直接访问4', '直接访问5',
                '直接访问6', '直接访问7654321', '直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎', '搜索引擎2', '搜索引擎3', '搜索引擎4']
        },
        series: [
            {
                name: '访问来源',
                type: 'pie',
                radius: ['40%', '60%'],//内圈大小，外圈大小
                center: ['50%', '30%'],//位置：距离左边，距离上边
                avoidLabelOverlap: false,
                color: ['#66b2fb', '#F9D858', '#4CD0DD', '#DF86F0', '#F5A7C1', '#acbD858', '#4Ca1DD', '#47F58C', '#17F55E'
                    , '#acac858', '#4ac1DD', '#6bb3f0', '#F002C1'],
                label: {
                    show: false,
                    position: 'center'
                },
                emphasis: {
                    label: {
                        show: true,
                        fontSize: '20',
                        fontWeight: 'bold'
                    }
                },
                labelLine: {
                    show: false
                },
                itemStyle: {
                    normal: {
                        // 设置扇形的阴影
                        shadowBlur: 15,
                        shadowColor: '#cccccc',
                        shadowOffsetX: -5,
                        shadowOffsetY: 5

                    }
                },
                data: [
                    { value: 335, name: '直接访问1'},
                    { value: 335, name: '直接访问2'},
                    { value: 335, name: '直接访问345678'},
                    { value: 335, name: '直接访问4'},
                    { value: 335, name: '直接访问5'},
                    { value: 335, name: '直接访问6'},
                    { value: 335, name: '直接访问7654321'

最低0.47元/天解锁文章

最初的倔强

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
echarts混合图、省份地图、中国地图、环形图

最近工作上用到的几种echarts图表样例，在此记录下：<!DOCTYPE html><html lang="en"><head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>echarts环形图</title> <style type="text/css" media="screen"&...
复制链接

扫一扫