echarts做数据可视化

最新推荐文章于 2023-10-16 08:31:24 发布

人间散章

最新推荐文章于 2023-10-16 08:31:24 发布

阅读量2.2k

点赞数 5

文章标签： echarts

本文链接：https://blog.csdn.net/qq_64750772/article/details/123809571

版权

引入

<html>
<head>
    <script src="source/echarts.js"></script>
</head>
<body>
<div id="bar1" style="width:800px;height:600px"></div>

</body>
</html>

柱状图

<script type="text/javascript">
        window.onload = function() {
            drawMyBar1();
        }
        function drawMyBar1() {
        var companyName = ['湖南','湖北','安徽','河南','河北'];
        var companyRate = ['80','40','50','60','10'];
        var myBar1 = echarts.init(document.getElementById('bar1'));
        var option = {
            grid : {
                y : '12%', //图形上方偏移
                y2 : '10%' //图形下方偏移
            },
            tooltip : {
                trigger : 'axis',
                axisPointer : { // 坐标轴指示器，坐标轴触发有效
                    type : 'shadow' // 默认为直线，可选为：'line' | 'shadow'
                }
            },
            xAxis : [ {
                type : 'category',
                data : companyName,
                axisPointer : {
                    type : 'shadow'
                }
            } ],
            yAxis : [ {
                type : 'value',
                name : '达成率',
                min : 0,
                max : 100,
                axisLabel : {
                    formatter : '{value} %'
                },
            } ],
            series : [ {
                name : '达成率',
                type : 'bar',
                data : companyRate,
                barWidth : '50%', //柱图宽度
                yAxisIndex : 0,
                label : {
                    normal : {
                        show : true,
                        position : 'top', //label显示在柱状图上方,'insideTop'显示在柱状图内部上方
                        fontSize : 12,
                         formatter : function(params) {
                            if (params.value) {
                                return params.value + '%' //label添加%号
                            } else {
                                return '';
                            }
                        } 


                    }
                },
            },
            ]
        };
        myBar1.setOption(option);
        }
    </script>

堆叠图

 <script>
        //初始化
        var echart = echarts.init(document.getElementById("container"), "dark");
        var mycolor2 = {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [{
                offset: 0, color: 'rgba(0, 85, 255, 0.7)' // 0% 处的颜色
            }, {
                offset: .7, color: 'rgba(29, 249, 231, 0)' // 100% 处的颜色
            }],
            global: false // 缺省为 false
        }
        var mycolor1 = {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [{
                offset: 0, color: '#007991' // 0% 处的颜色
            }, {
                offset: .7, color: '#78ffd6' // 100% 处的颜色
            }],
            global: false // 缺省为 false
        }

        //定义选项
        var option = {
            title: { text: "堆叠图" },
            tooltip: { trigger: "axis" },//axis轴线  item元素
            legend: { data: ["ui", "java", "web", "python"] },
            xAxis: {},
            yAxis: { data: ["2019", "2020", "2022"] },
            // label: { show: true, position: "insideRight", formatter: "{a}:{c}" },
            series: [
                {
                    name: "ui", type: "bar", data: [120, 80, 70], stack: true,
                    // label标签 show显示 position位置, insideRight内部右侧, formatter格式化l/ {a}系列名称{b}轴线名称{c}值
                    label: { show: true, position: "insideRight", formatter: "{a}:{c}" }
                },
                { name: "java", type: "bar", data: [27, 50, 100], stack: true, label: { show: true, position: "insideRight", formatter: "{a}:{c}" } },
                { name: "web", type: "bar", data: [180, 220, 240], stack: true, label: { show: true, position: "insideRight", formatter: "{a}:{c}" } },
                { name: "python", type: "bar", data: [200, 120, 80], stack: true, label: { show: true, position: "insideRight", formatter: "{a}:{c}" } },
            ]
        }
        //更新选项
        echart.setOption(option);
    </script>

富文本

 <script>
        var echart = echarts.init(document.getElementById("container"), 'dark');
        var option = {
            color: ["#FC5C7D", "#ef8e38"],
            title: { text: "网站访问来源" },
            tooltip: {},
            series: [
                {
                    name: "来源", type: "pie", radius: ["20%", "50%"], data: [
                        {
                            value: 120, name: "百度", label: {
                                show: true,
                                position: "center",
                                //a 系列名 b数据名称 c数据值 d百分比
                                formatter: "{big|{d}}{small|%}\n{b}",
                                //定义富文本样式
                                rich: {
                                    big: { fontSize: "30px", fontWeight: 900 },
                                    small: { fontSize: "12px", color: "#00aaff" }
                                }
                            }
                        }, { value: 25, name: "其他" }
                    ]
                },

            ]
        };
        echart.setOption(option)
    </script>

人间散章

关注

5
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
echarts做数据可视化

引入<html><head> <script src="source/echarts.js"></script></head><body><div id="bar1" style="width:800px;height:600px"></div></body></html>柱状图<script type="text/javascript"&gt
复制链接

扫一扫