备案控制台
开发者社区 开发与运维 文章 正文

Echarts5.3.2可视化案例-应用篇

2022-11-27 292
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： Echarts5.3.2可视化案例-应用篇Canvas案例SVG案例

Canvas案例

效果：


前端代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- <div id="canvas"> -->
    <canvas id="barChart" height="400" width="600" style="margin:50px"></canvas>
    </div>
    <script>
        function goBarChart(dataArr) {
            // 声明所需变量
            var canvas, ctx;
            // 图表属性
            var cWidth, cHeight, cMargin, cSpace;
            var originX, originY;
            // 柱状图属性
            var bMargin, tobalBars, bWidth, maxValue;
            var totalYNomber;
            var gradient;
            // 运动相关变量
            var ctr, numctr, speed;
            //鼠标移动
            var mousePosition = {};
            // 获得canvas上下文
            canvas = document.getElementById("barChart");
            if (canvas && canvas.getContext) {
                ctx = canvas.getContext("2d");
            }
            initChart(); // 图表初始化
            drawLineLabelMarkers(); // 绘制图表轴、标签和标记
            drawBarAnimate(); // 绘制柱状图的动画
            //检测鼠标移动
            var mouseTimer = null;
            canvas.addEventListener("mousemove", function (e) {
                e = e || window.event;
                if (e.layerX || e.layerX == 0) {
                    mousePosition.x = e.layerX;
                    mousePosition.y = e.layerY;
                } else if (e.offsetX || e.offsetX == 0) {
                    mousePosition.x = e.offsetX;
                    mousePosition.y = e.offsetY;
                }
                //console.log(mousePosition);
                clearTimeout(mouseTimer);
                mouseTimer = setTimeout(function () {
                    ctx.clearRect(0, 0, canvas.width, canvas.height);
                    drawLineLabelMarkers();
                    drawBarAnimate(true);
                }, 10);
            });
            //点击刷新图表
            canvas.onclick = function () {
                initChart(); // 图表初始化
                drawLineLabelMarkers(); // 绘制图表轴、标签和标记
                drawBarAnimate(); // 绘制折线图的动画
            };
            // 图表初始化
            function initChart() {
                // 图表信息
                cMargin = 30;
                cSpace = 60;
                cHeight = canvas.height - cMargin * 2 - cSpace;
                cWidth = canvas.width - cMargin * 2 - cSpace;
                originX = cMargin + cSpace;
                originY = cMargin + cHeight;
                // 柱状图信息
                bMargin = 15;
                tobalBars = dataArr.length;
                bWidth = parseInt(cWidth / tobalBars - bMargin);
                maxValue = 0;
                for (var i = 0; i < dataArr.length; i++) {
                    var barVal = parseInt(dataArr[i][1]);
                    if (barVal > maxValue) {
                        maxValue = barVal;
                    }
                }
                maxValue += 50;
                totalYNomber = 10;
                // 运动相关
                ctr = 1;
                numctr = 100;
                speed = 10;
                //柱状图渐变色
                gradient = ctx.createLinearGradient(0, 0, 0, 300);
                gradient.addColorStop(0, 'green');
                gradient.addColorStop(1, 'rgba(67,203,36,1)');
            }
            // 绘制图表轴、标签和标记
            function drawLineLabelMarkers() {
                ctx.translate(0.5, 0.5);  // 当只绘制1像素的线的时候，坐标点需要偏移，这样才能画出1像素实线
                ctx.font = "12px Arial";
                ctx.lineWidth = 1;
                ctx.fillStyle = "#000";
                ctx.strokeStyle = "#000";
                // y轴
                drawLine(originX, originY, originX, cMargin);
                // x轴
                drawLine(originX, originY, originX + cWidth, originY);
                // 绘制标记
                drawMarkers();
                ctx.translate(-0.5, -0.5);  // 还原位置
            }
            // 画线的方法
            function drawLine(x, y, X, Y) {
                ctx.beginPath();
                ctx.moveTo(x, y);
                ctx.lineTo(X, Y);
                ctx.stroke();
                ctx.closePath();
            }
            // 绘制标记
            function drawMarkers() {
                ctx.strokeStyle = "#E0E0E0";
                // 绘制 y
                var oneVal = parseInt(maxValue / totalYNomber);
                ctx.textAlign = "right";
                for (var i = 0; i <= totalYNomber; i++) {
                    var markerVal = i * oneVal;
                    var xMarker = originX - 5;
                    var yMarker = parseInt(cHeight * (1 - markerVal / maxValue)) + cMargin;
                    //console.log(xMarker, yMarker+3,markerVal/maxValue,originY);
                    ctx.fillText(markerVal, xMarker, yMarker + 3, cSpace); // 文字
                    if (i > 0) {
                        drawLine(originX, yMarker, originX + cWidth, yMarker);
                    }
                }
                // 绘制 x
                ctx.textAlign = "center";
                for (var i = 0; i < tobalBars; i++) {
                    var markerVal = dataArr[i][0];
                    var xMarker = parseInt(originX + cWidth * (i / tobalBars) + bMargin + bWidth / 2);
                    var yMarker = originY + 15;
                    ctx.fillText(markerVal, xMarker, yMarker, cSpace); // 文字
                }
                // 绘制标题 y
                ctx.save();
                ctx.rotate(-Math.PI / 2);
                ctx.fillText("产 量", -canvas.height / 2, cSpace - 10);
                ctx.restore();
                // 绘制标题 x
                ctx.fillText("年份", originX + cWidth / 2, originY + cSpace / 2 + 10);
            };
            //绘制柱形图
            function drawBarAnimate(mouseMove) {
                for (var i = 0; i < tobalBars; i++) {
                    var oneVal = parseInt(maxValue / totalYNomber);
                    var barVal = dataArr[i][1];
                    var barH = parseInt(cHeight * barVal / maxValue * ctr / numctr);
                    var y = originY - barH;
                    var x = originX + (bWidth + bMargin) * i + bMargin;
                    drawRect(x, y, bWidth, barH, mouseMove);  //高度减一避免盖住x轴
                    ctx.fillText(parseInt(barVal * ctr / numctr), x + 15, y - 8); // 文字
                }
                if (ctr < numctr) {
                    ctr++;
                    setTimeout(function () {
                        ctx.clearRect(0, 0, canvas.width, canvas.height);
                        drawLineLabelMarkers();
                        drawBarAnimate();
                    }, speed);
                }
            }
            //绘制方块
            function drawRect(x, y, X, Y, mouseMove) {
                ctx.beginPath();
                ctx.rect(x, y, X, Y);
                if (mouseMove && ctx.isPointInPath(mousePosition.x, mousePosition.y)) { //如果是鼠标移动的到柱状图上，重新绘制图表
                    ctx.fillStyle = "green";
                } else {
                    ctx.fillStyle = gradient;
                    ctx.strokeStyle = gradient;
                }
                ctx.fill();
                ctx.closePath();
            }
        }
        goBarChart(
            [[2007, 750], [2008, 425], [2009, 960], [2010, 700], [2011, 800], [2012, 975], [2013, 375], [2014, 775]]
        )
    </script>
</body>
</html>

SVG案例

参考：

截图：


代码：

<!DOCTYPE html>
<html>
<body>
<h1>My first SVG</h1>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
   <circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red" />
</svg> 
</body>
</html>

Zrender基本案例

参考：https://ecomfe.github.io/zrender-doc/public/api.html

效果：


流程：

引入 zrender 库

编写 div 容器

初始化 zrender 对象

初始化 zrender 绘图对象

调用 zrender add 方法绘图

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <script src="https://cdn.jsdelivr.net/npm/zrender@4.3.0/dist/zrender.js"></script>
</head>
<body>
    <div id="container" style="width: 800px;height: 800px;"></div>
    <script>
        var zr = zrender.init(document.getElementById('container'));
        var rect = new zrender.Rect({
          shape: {
            x: 0,
            y: 0,
            width: 50,
            height: 50
          },
          style: {
            fill: 'red',
            lineWidth: 0
          }
        });
        var line = new zrender.Polyline({
          shape: {
            points:[
              [100, 100],
              [250, 75],
              [300, 100]
            ]
          },
          style: {
            stroke: 'blue',
            lineWidth: 1
          }
        });
        var circle = new zrender.Circle({
          shape: {
            cx: 200,
            cy: 200,
            r: 50
          },
          style: {
            fill: 'red',
            stroke: 'green',
            lineWidth: 2
          }
        });
        var point = new zrender.Polyline({
          shape: {
            points:[
              [300, 300],
              [301, 301]
            ]
          },
          style: {
            stroke: 'red',
            lineWidth: 1
          }
        });
        zr.add(rect);
        zr.add(line);
        zr.add(circle);
        zr.add(point);
    </script>  
</body>
</html>

Echarts简介

官网介绍

1.官网地址：

https://echarts.apache.org/en/index.html

Echarts案例

https://echarts.apache.org/zh/tutorial.html

1.下载echarts.js到本地

2.然后在html文件中通过如下引入

<script src="echarts.min.js"></script>

或通过cdn免下载引入

<script src="https://cdn.jsdelivr.net/npm/echarts@5.3.2/dist/echarts.js"></script>

3.使用

初始化一个具有宽和高的容器

<div id="main" style="width: 600px ;height:600px;"></div>

在script中进行如下操作

初始化e’charts,绑定容器

<script>
        // init echarts
        var myid = document.getElementById("main");
        var myecharts = echarts.init(myid);
        // define option
        // invoking function
    </script>

设置option,这里包括我们想要绘制的图形类型，数据，x,y轴信息等

在官网示例中找

        // define option
        var option = {
            title:{
                text:"echarts 标题"
            },
            xAxis:{
                data:['food','digital','dress','bags']
            },
            yAxis:{
            },
            series:{
                type:"bar",
                data:[100,120,90,150]
            },
        }

将option传给myecharts实例就可以了

//Call the function and pass the arguments
        myecharts.setOption(option);

展示如图


Echarts案例

1.Echarts样式主题，显示加载动画，resize

参考：https://echarts.apache.org/zh/theme-builder.html

主题：




下载js主题

https://echarts.apache.org/zh/theme-builder.html


下载的文件名称为，purple-passion.js，将js放入到工程的js目录下

js/purple-passion.js

html页面布局

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./js/echarts.js"></script>
    <script src="./js/purple-passion.js"></script>
</head>
<body>
    <!-- 容器 -->
    <div id="main" style="width: 600px;height: 600px;"></div>
    <!-- 写echarts代码 -->
    <script>
        var mydiv = document.getElementById('main')
        // 初始化echarts 采用默认主题，canvas渲染
        // var myChart = echarts.init(mydiv);
        // 初始化echarts  采用不同的主题
        // var myChart =  echarts.init(mydiv,'purple-passion');
        // 初始化echarts  采用不同的主题 采用svg渲染
        var myChart =  echarts.init(mydiv,'dark', {renderer: 'svg'});
        // 显示加载页面
        myChart.showLoading();
        var app = {
            xday: ["周1","周2","周3","周4","周5"],
            yvalue: [10,20,30,30,25]
        };
        var option;
        option = {
            title: {
                text: '数据加载示例'
            },
            tooltip: {},
            legend: {
                data: ['销量']
            },
            xAxis: {
                data: app.xday
            },
            yAxis: {},
            series: [{
                name: '销量',
                type: 'bar',
                data: app.yvalue
            }]
        }
        myChart.setOption(option)
        // 关闭加载动画
        myChart.hideLoading();
        // 监听窗口，动态调整echarts大小
        window.addEventListener("resize", function () {
            myChart.resize();
        });
    </script>
</body>
</html>

2.Echarts多系列

参考：

效果：


代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./js/echarts.js"></script>
    <script src="./js/purple-passion.js"></script>
</head>
<body>
    <!-- 容器 -->
    <div id="main" style="width: 600px;height: 600px;"></div>
    <!-- 写echarts代码 -->
    <script>
        var myChart = echarts.init(document.getElementById("main"));
        myChart.showLoading();
        var option;
        option = {
            title: {
                text: '多系列混合'
            },
            tooltip: {},
            legend: {
                show : true,
                // data:['销量']
            },
            xAxis: {
                data: ['一季度', '二季度', '三季度', '四季度',]
            },
            yAxis: {},
            toolbox: {
                feature: {
                    dataZoom: {
                        yAxisIndex: 'none'
                    },
                    restore: {},
                    saveAsImage: {}
                }
            },
            series: [ {
                type: 'line',
                data: [{
                    name: '一季度', value: 100
                }, {
                    name: '二季度', value: 112
                }, {
                    name: '三季度', value: 96
                }, {
                    name: '四季度', value: 123
                }] 
            }, {
                type: 'pie',
                center: ['65%', 60],
                radius: 35,
                data: [{
                    name: '一季度', value: 50
                }, {
                    name: '二季度', value: 60
                }, {
                    name: '三季度', value: 55
                }, {
                    name: '四季度', value: 70
                }]
            },{
                type: 'bar',
                data: [{
                    name: '一季度', value: 79
                }, {
                    name: '二季度', value: 81
                }, {
                    name: '三季度', value: 88
                }, {
                    name: '四季度', value: 72
                }] ,
                markPoint: {
                    data: [
                        { type: 'max', name: "max value" },
                        { type: 'min', name: "min value" }
                    ],
                }
            }],
        }
        myChart.hideLoading();
        myChart.setOption(option);
        window.addEventListener("resize", function () {
            myChart.resize();
        });
    </script>
</body>
</html>

3.Echarts多系列多坐标轴

效果：


代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./js/echarts.js"></script>
    <script src="./js/purple-passion.js"></script>
</head>
<body>
    <!-- 容器 -->
    <div id="main" style="width: 600px;height: 600px;"></div>
    <!-- 写echarts代码 -->
    <script>
    var myChart = echarts.init(document.getElementById("main"));
    myChart.showLoading();
    var option;
    option={
        title: {
            text: '多系列多坐标轴'
        },
        tooltip: {},
        legend: {
            // data:['销量']
        },
        xAxis: {
            data: ['一季度','二季度','三季度','四季度',]
        },
        yAxis: [{
                type:'value'
            },{
                type:'value'
            },
        ],
        toolbox: {
            feature: {
              dataZoom: {
                yAxisIndex: 'none'
              },
              restore: {},
              saveAsImage: {}
            }
          },
        dataset:{
            source: [
                ['一季度', 79, 1000, '分类1', 50],
                ['二季度', 81, 1120, '分类2', 60],
                ['三季度', 88, 960, '分类3', 55],
                ['四季度', 72, 1230, '分类4', 70],
              ]
        },
        series: [{
            type: 'pie',
            center: ['65%', 60],
            radius: 35,
            encode: { itemName: 3, value: 4 },
          }, {
            type: 'line',
            encode: { x: 0, y: 2 },
            yAxisIndex:0
          }, {
            type: 'bar',
            encode: { x: 0, y: 1 },
            yAxisIndex:1
          }]
    }
    myChart.hideLoading();
    myChart.setOption(option);
    window.addEventListener("resize", function () {
            myChart.resize();
        });
    </script>
</body>
</html>

4.Echarts系列的设置

参考：

https://echarts.apache.org/zh/option.html#series

效果



代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./js/echarts.js"></script>
    <script src="./js/purple-passion.js"></script>
</head>
<body>
    <!-- 容器 -->
    <div id="main" style="width: 600px;height: 600px;"></div>
    <!-- 写echarts代码 -->
    <script>
        var myChart = echarts.init(document.getElementById("main"));
        myChart.showLoading();
        var option;
        option = {
            title: {
                text: '系列设置'
            },
            tooltip: {},
            legend: {
                // data:['销量']
            },
            xAxis: {
                data: ['一季度', '二季度', '三季度', '四季度',]
            },
            yAxis: [{
                type: 'value'
            }, {
                type: 'value'
            },
            ],
            toolbox: {
                feature: {
                    dataZoom: {
                        yAxisIndex: 'none'
                    },
                    restore: {},
                    saveAsImage: {}
                }
            },
            dataset: {
                source: [
                    ['一季度', 79, 1000, '分类1', 50],
                    ['二季度', 81, 1120, '分类2', 60],
                    ['三季度', 88, 960, '分类3', 55],
                    ['四季度', 60, 1230, '分类4', 70],
                ]
            },
            series: [{
                type: 'bar',
                encode: { x: 0, y: 1 },
                yAxisIndex: 0,
                // 显示最大最小标记
                // https://echarts.apache.org/zh/option.html#series-bar.markPoint
                // 标记点
                markPoint: {
                    data: [
                        { type: 'max', name: "max value" },
                        { type: 'min', name: "min value" },
                        { type: 'average', name: "average value" },
                    ],
                },
                // https://echarts.apache.org/zh/option.html#series-bar.markLine
                // 标记线
                markLine: {
                    data: [
                        { type: "average", name: "average" }
                    ]
                },
                // https://echarts.apache.org/zh/option.html#series-bar.label
                // 标签
                label: {
                    show: true,
                    rotate: 0,
                    position: "inside",
                },
                // 柱宽度
                barWidth: '20%',
            }]
        }
        myChart.hideLoading();
        myChart.setOption(option);
        // 自适应
        window.addEventListener("resize", function () {
            myChart.resize();
        });
    </script>
</body>
</html>

5.调试盘+渐进色+高亮

效果



代码：

    <!-- 容器 -->
    <div id="main" style="width: 600px;height: 600px;"></div>
    <!-- 写echarts代码 -->
<script>
        var myChart = echarts.init(document.getElementById("main"));
        myChart.showLoading();
        var option;
        option = {
            title: {
                text: '系列设置'
            },
            tooltip: {},
            legend: {
                // data:['销量']
            },
            xAxis: {
                data: ['一季度', '二季度', '三季度', '四季度',]
            },
            yAxis: [{
                type: 'value'
            }, {
                type: 'value'
            },
            ],
            toolbox: {
                feature: {
                    dataZoom: {
                        yAxisIndex: 'none'
                    },
                    restore: {},
                    saveAsImage: {}
                }
            },
            dataset: {
                source: [
                    ['一季度', 79, 1000, '分类1', 50],
                    ['二季度', 81, 1120, '分类2', 60],
                    ['三季度', 88, 960, '分类3', 55],
                    ['四季度', 60, 1230, '分类4', 70],
                ]
            },
            // item项渐进色
            itemStyle: {
                color: {
                    type: 'line',
                    x: 0,
                    y: 0,
                    x2: 1,
                    y2: 1,
                    colorStops: [
                        {
                            offset: 0, color: 'blue'
                        }, {
                            offset: 1, color: 'red'
                        }
                    ]
                },
            },
            // 强调渐进色
            emphasis: {
                itemStyle: {
                    color: {
                        type: 'line',
                        x: 0,
                        y: 0,
                        x2: 1,
                        y2: 1,
                        colorStops: [
                            {
                                offset: 0, color: 'red'
                            }, {
                                offset: 1, color: 'pink'
                            }
                        ]
                    },
                }
            },
            series: [{
                type: 'bar',
                encode: { x: 0, y: 1 },
                yAxisIndex: 0,
                // 显示最大最小标记
                // https://echarts.apache.org/zh/option.html#series-bar.markPoint
                // 标记点
                markPoint: {
                    data: [
                        { type: 'max', name: "max value" },
                        { type: 'min', name: "min value" },
                        { type: 'average', name: "average value" },
                    ],
                },
                // https://echarts.apache.org/zh/option.html#series-bar.markLine
                // 标记线
                markLine: {
                    data: [
                        { type: "average", name: "average" }
                    ]
                },
                // https://echarts.apache.org/zh/option.html#series-bar.label
                // 标签
                label: {
                    show: true,
                    rotate: 0,
                    position: "inside",
                },
                // 柱宽度
                barWidth: '20%',
            }]
        }
        myChart.hideLoading();
        myChart.setOption(option);
        // 自适应
        window.addEventListener("resize", function () {
            myChart.resize();
        });
    </script>

6.各种组件

效果



代碼：

<!-- 容器 -->
    <div id="main" style="width: 600px;height: 600px;"></div>
    <!-- 写echarts代码 -->
    <script>
        var myChart = echarts.init(document.getElementById("main"));
        myChart.showLoading();
        var option;
        option = {
            // 标题
            title: {
                text: "titledemo",
                subtext: "subtitle",
                link: "https://www.baidu.com",
                textStyle: {
                    color: "red"
                },
                subtextStyle: {
                    color: 'blue'
                },
                borderWidth: 5,
                borderColor: "red",
                borderRadius: 10,
                top: 10,
                left: 50,
                right: 50,
                bottom: 80,
            },
            // 提示：tooltip 
            tooltip: {
                trigger: 'axis',
                triggerOn: 'click',
                formatter: function (args) {
                    return args[0].name + " 數量為 :" + args[0].data[1]
                }
            },
            xAxis: {
                data: ['一季度', '二季度', '三季度', '四季度',]
            },
            yAxis: [{
                type: 'value'
            }, {
                type: 'value'
            },
            ],
            // 工具按钮：toolbox
            toolbox: {
                feature: {
                    saveAsImage: {},
                    dataView: {},
                    restore: {
                    },
                    dataZoom: {
                    },
                    magicType: {
                        type: ['bar', 'line']
                    }
                }
            },
            // 图例 需要再series中添加name进行关联      
            legend: {
                data: [{
                    name: '柱形',
                    // 强制设置图形为圆。
                    icon: 'circle',
                    // 设置文本为红色
                    textStyle: {
                        color: 'black'
                    }
                }, 'line', 'pie']
            },
            dataset: {
                source: [
                    ['一季度', 79, 1000, '分类1', 50],
                    ['二季度', 81, 1120, '分类2', 60],
                    ['三季度', 88, 960, '分类3', 55],
                    ['四季度', 60, 1230, '分类4', 70],
                ]
            },
            // item项渐进色
            itemStyle: {
                color: {
                    type: 'line',
                    x: 0,
                    y: 0,
                    x2: 1,
                    y2: 1,
                    colorStops: [
                        {
                            offset: 0, color: 'blue'
                        }, {
                            offset: 1, color: 'red'
                        }
                    ]
                },
            },
            // 强调渐进色
            emphasis: {
                itemStyle: {
                    color: {
                        type: 'line',
                        x: 0,
                        y: 0,
                        x2: 1,
                        y2: 1,
                        colorStops: [
                            {
                                offset: 0, color: 'red'
                            }, {
                                offset: 1, color: 'pink'
                            }
                        ]
                    },
                }
            },
            series: [{
                type: 'bar',
                name:"柱形",
                encode: { x: 0, y: 1 },
                yAxisIndex: 0,
                // 显示最大最小标记
                // https://echarts.apache.org/zh/option.html#series-bar.markPoint
                // 标记点
                markPoint: {
                    data: [
                        { type: 'max', name: "max value" },
                        { type: 'min', name: "min value" },
                        { type: 'average', name: "average value" },
                    ],
                },
                // https://echarts.apache.org/zh/option.html#series-bar.markLine
                // 标记线
                markLine: {
                    data: [
                        { type: "average", name: "average" }
                    ]
                },
                // https://echarts.apache.org/zh/option.html#series-bar.label
                // 标签
                label: {
                    show: true,
                    rotate: 0,
                    position: "inside",
                },
                // 柱宽度
                barWidth: '20%',
            }]
        }
        myChart.hideLoading();
        myChart.setOption(option);
        // 自适应
        window.addEventListener("resize", function () {
            myChart.resize();
        });
    </script>


7.折线图设计-标记-线条-填充-间隙-缩放-堆叠

效果：


代码：

<!-- 容器 -->
    <div id="main" style="width: 600px;height: 600px;"></div>
    <!-- 写echarts代码 -->
    <script>
        var myCharts = echarts.init(document.getElementById("main"));
        myCharts.showLoading()
        var xDataArr = ['piter','tom','bill','li']
        var yDataArr = [88,92,60,70]
        var option = {
            animition:true,
            animationDuration:2000,
            animationEasing:"bounceOut", // linear  bounceOut
            animationThreshold:4,
            xAxis :{
                data:xDataArr,
                type:"category",
                boundaryGap:false
            },
            yAxis :{
                type:'value',
                scale:true
            },
            series:[{
                type:'line',
                name:'score',
                stack:'all',
                data:yDataArr,
                markPoint:{
                    data:[
                        {type:'max',name:"max value"},
                        {type:'min',name:"min value"}
                        ],
                },
                markLine:{
                    data:[
                        {type:"average",name:"average"}
                        ]
                },
                markArea:{
                    data:[
                        [{xAxis:'piter'},{xAxis:'tom'}],
                        [{xAxis:'bill'},{xAxis:'li'}]
                    ]
                },
                smooth:true,
                lineStyle:{
                    color:'green',
                    type:'solid',
                },
                areaStyle:{
                    color:'pink'
                },
                label:{
                    show:true,
                    rotate:75,
                    position:"inside",
                },
                barWidth:'20%',
            },{
                type:"line",
                data:yDataArr,
                stack:'all',
                smooth:true,
                areaStyle:{}
            }
            ]
        }
        myCharts.hideLoading()
        myCharts.setOption(option);
    </script>

8.地图实现

广东地图

https://blog.csdn.net/qq_27007423/article/details/113941441

中国地图

https://blog.csdn.net/ju__ju/article/details/104000887

datav json数据

http://datav.aliyun.com/tools/atlas/

地图基本使用：


1.加载该区域的矢量地图数据:

2.通过异步获取数据，并echarts.registerMap(‘china’,ret)注册到全局对象中

3.指明geo配置下的type和map属性，roam属性

4.通过zoom放大区域

5.通过center定位中心点

6.geo结合series


地图结合散点图

1.给series下增加新的对象

2.准备好散点数据，设置给新对象的data

3.配置新对象的type

type:effectScatter

4.散点图使用地图坐标系统

coordinateSystem:‘geo’

5.让涟漪的效果更加明显

rippleEffect:{

scale:10}


效果如下：


代码：

<div
文章标签：
JavaScript
前端开发
容器
数据可视化
定位技术
CDN
atlas
数据格式
JSON
关键词：
ECharts可视化
ECharts应用
ECharts案例
IT从业者张某某
目录
相关文章
yma16
|
15天前
|
存储 JavaScript 数据可视化
vue3+echarts应用——深度遍历html的dom结构并用树图进行可视化
vue3+echarts应用——深度遍历html的dom结构并用树图进行可视化
yma16
38 1
漏刻有时
|
10月前
|
容器
layui框架实战案例(14)：tabs选项卡切换时echarts拉伸变形无法正常显示的解决方案
layui框架实战案例(14)：tabs选项卡切换时echarts拉伸变形无法正常显示的解决方案
漏刻有时
104 0
漏刻有时
|
10月前
|
定位技术 数据格式
Echarts实战案例代码(59)：geomap实现飞线、散点、引导线以及重叠label的解决
Echarts实战案例代码(59)：geomap实现飞线、散点、引导线以及重叠label的解决
漏刻有时
323 0
龙大吉
|
13天前
|
数据可视化 JavaScript 前端开发
Echarts是一个开源的JavaScript可视化库，用于创建各种类型的图表
Echarts是JavaScript的开源可视化库，Python通过Pyecharts库可调用它来绘制图表。示例展示了如何用Pyecharts创建柱状图：定义图表对象，设置标题和坐标轴，添加X轴、Y轴数据，最后渲染展示。Pyecharts还支持折线图、散点图、饼图等多种图表类型，更多详情可查阅官方文档。
龙大吉
30 0
拓端数据部落
|
15天前
|
新零售 分布式计算 数据可视化
数据分享|基于Python、Hadoop零售交易数据的Spark数据处理与Echarts可视化分析
数据分享|基于Python、Hadoop零售交易数据的Spark数据处理与Echarts可视化分析
拓端数据部落
31 0
yma16
|
15天前
|
数据采集 数据可视化 小程序
vue3+echarts可视化——记录我的2023编程之旅
vue3+echarts可视化——记录我的2023编程之旅
yma16
28 1
yma16
|
16天前
|
数据可视化 定位技术
selenuim&echarts——可视化分析csdn新星赛道选手展示头像、展示ip城市和断言参赛信息的有效性（进阶篇）（二）
selenuim&echarts——可视化分析csdn新星赛道选手展示头像、展示ip城市和断言参赛信息的有效性（进阶篇）
yma16
18 0
yma16
|
16天前
|
数据采集 JSON 自然语言处理
selenuim&echarts——可视化分析csdn新星赛道选手展示头像、展示ip城市和断言参赛信息的有效性（进阶篇）（一）
selenuim&echarts——可视化分析csdn新星赛道选手展示头像、展示ip城市和断言参赛信息的有效性（进阶篇）
yma16
17 0
selenuim&echarts——可视化分析csdn新星赛道选手展示头像、展示ip城市和断言参赛信息的有效性（进阶篇）（一）
研发咨询顾问
|
2月前
|
数据可视化 前端开发
web前端-Echarts-5.3高级可视化和图表组合布局
web前端-Echarts-5.3高级可视化和图表组合布局
研发咨询顾问
44 2
研发咨询顾问
|
2月前
|
前端开发 JavaScript Apache
web前端-Echarts-5.3安装配置和案例
web前端-Echarts-5.3安装配置和案例
研发咨询顾问
23 1

热门文章

最新文章

  • 1
    echarts 关于折线统计图常用的属性设置--超详细（附加源码）
  • 2
    【统计图】Echarts实现多条折线图渐变堆叠效果
  • 3
    echarts 横纵分割线颜色透明度
  • 4
    Vue引入Echarts图表的使用
  • 5
    vue3+echarts应用——深度遍历html的dom结构并用树图进行可视化
  • 6
    Docusaurus框架——react+antd+echarts自定义mdx生成图表代码解释文档
  • 7
    echarts_自定义graph关系图
  • 8
    echarts图表
  • 9
    vue2、vue3分别配置echarts多图表的同步缩放（一）
  • 10
    数据分享|基于Python、Hadoop零售交易数据的Spark数据处理与Echarts可视化分析
  • 1
    web前端-Echarts-5.3高级可视化和图表组合布局
    44
  • 2
    web前端-Echarts-5.3安装配置和案例
    23
  • 3
    【数学建模竞赛】超赞作图网站分享Apache ECharts
    40
  • 4
    ECharts helloworld
    24
  • 5
    ECharts 对比 Highcharts 使用教程
    36
  • 6
    ECharts前端教程
    55
  • 7
    怎么在echarts图上左右滑动切换数据区间
    62
  • 8
    echarts图表坐标轴数据标签添加下划线
    61
  • 9
    vue + echarts实现国省市三级下钻联动
    83
  • 10
    使用vue3实现echarts漏斗图表以及实现echarts全屏放大效果
    30

    • 相关课程

    更多
  • 【数据可视化】基础数据画图
  • Python 数据可视化库 Matplotlib 快速入门

    • 相关电子书

    更多
  • WebGL在数据可视化中的实践
  • WebGL 在前端可视化中的实践
  • 数据展现：可视化报表及嵌入应用

    • 相关实验场景

    更多
  • 基于Kibana Lens进行数据可视化，灵活分析航班信息
  • 通过可观测可视化Grafana版进行数据可视化展示与分析
    • 下一篇
    部署LAMP环境（Alibaba Cloud Linux 3）