echarts绘制出你心目中的图表

最新推荐文章于 2024-04-03 16:23:48 发布
最新推荐文章于 2024-04-03 16:23:48 发布
阅读量470 收藏 5
点赞数 4
分类专栏： 前端 文章标签： javascript js 数据可视化
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Littleflowers/article/details/116902284
版权

echarts绘制出你心目中的图表

写在前面

在大三下学期软件项目的实际开发中，往往涉及到系统的审计模块。我们选用echarts作为各类图表的绘制，首先上图(忽略中间的百度地图api)：
在这里插入图片描述
ECharts 是一个使用 JavaScript 实现的开源可视化库,涵盖各行业图表,满足各种需求。这是项目中管理员部分的首页审计界面。下面将进行详细介绍。

echarts基本结构

引入echarts

在web前端通常使用标签的方式引入echarts。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <!-- 引入 ECharts 文件 -->
    <script src="https://cdn.bootcss.com/echarts/4.6.0/echarts.min.js"></script>
</head>
</html>

初始化echarts

在绘图前我们需要为 ECharts 准备一个具备高宽的 DOM 容器。

<body>
    <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
    <div id="main" style="width: 600px;height:400px;"></div>
</body>

然后就可以通过 echarts.init 方法初始化一个 echarts 实例

<script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));
<script>

用 option 描述图表

使用 option 来描述其对图表的各种需求，包括：有什么数据、要画什么图表、图表长什么样子、含有什么组件、组件能操作什么事情等等。
option中的元素之一：组件(component).如xAxis（直角坐标系 X 轴）、yAxis（直角坐标系 Y 轴）、grid（直角坐标系底板）、dataZoom（数据区缩放组件）、visualMap（视觉映射组件）、tooltip（提示框组件）、toolbox（工具栏组件）等。
系列(series):一组数值以及他们映射成的图,系列也可以称为组件。
option编写示例如下：

var option={
        //图表的标题组件
        title:{
            text:'系统上传视频转码状态'
        },
        //图表的工具栏组件
        toolbox: {
            show : true,//工具栏可显示
            feature : {
                mark : {show: true},
                dataView : {show: true, readOnly: false},//可点击查看具体数据
                restore : {show: true},//图表可以刷新
                saveAsImage : {show: true}//图表可以以图片的形式保存
            }
        },
        //图表的y坐标轴
        yAxis:{
        type: 'value',//定义数据类型
        data:[1,2,3,4]//数据
        },
        //图表的x坐标轴
        yAxis:{
        type: 'value',//定义数据类型
        data:[1,2,3,4]//数据
        },
        //series中定义图表的类型，bar说明这是一个柱状图
        series:[{
            name:'视频数量',
            type:'bar',
            data:values //values为需显示的数据列表
        }]

显示图表

编写完option后，显示图表：

option && myChart.setOption(option);

echarts图表自适应

用window.onresize = myChart.resize; 可以完成自适应，就是把window的onresize事件赋值为echart的resize事件。当然这是单个图表的情况，要是多个图表，发现会不起作用。多个图表可以使用addEventListener，即

window.addEventListener("resize", () => { 
    this.myChart.resize();  
    this.myChart2.resize();  
    this.myChart3.resize();
});

echarts绘制图表的基本流程

  • 引入echarts.min.js(推荐使用echarts5）
  • 初始化echarts：var myChart = echarts.init(document.getElementById(‘xxx’));
  • 编写option指定显示选项及数据
  • 显示图表：option&&myChart.setOption(option);

饼状图（系统上传视频转码状态）

<script type="text/javascript">
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main1'),'dark');
    //从html标签中获取数据
    var initNum=$("#initNum").val();
    var progressNum=$("#progressNum").val();
    var finishNum=$("#finishNum").val();
    var errorNum=$("#errorNum").val();

    var option={
        //图表标题
        title:{
            text:'系统上传视频转码状态'
        },
        //工具选项
        toolbox: {
            show : true,
            feature : {
                mark : {show: true},
                dataView : {show: true, readOnly: false},
                restore : {show: true},
                saveAsImage : {show: true}
            }
        },
        //视觉组件，用于颜色的映射
        visualMap: {
            show: false,
            //显示的数值大小在0-100之内
            min: 0,
            max: 100,
            inRange: {
                colorLightness: [0, 1]
            }
        },
        //定义饼状图
        series : [
            {
                name: '转码状态',
                type: 'pie',
                radius: '55%',
                data:[
                    {value:initNum, name:'待转码'},
                    {value:progressNum, name:'转码中'},
                    {value:finishNum, name:'转码成功'},
                    {value:errorNum, name:'转码失败'},
                ],
                roseType: 'angle',//设置成南丁格尔图
                //该系列的文本设置
                label: {
                    normal: {
                        textStyle: {
                            color: 'rgba(255,255,255,0.3)'
                        }
                    }
                },
                //饼图的话还要将标签的视觉引导线的颜色设为浅色。
                labelLine: {
                    normal: {
                        lineStyle: {
                            color: 'rgba(255, 255, 255, 0.3)'
                        }
                    }
                },
                //itemStyle的emphasis是鼠标 hover 时候的高亮样式。这个示例里是正常的样式下加阴影
                itemStyle: {
                    normal: {
                        color: '#c23531',
                        shadowBlur: 200,
                        shadowColor: 'rgb(11,11,11)'
                    }
                }
            }
        ]
    };
    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);

</script>

显示效果：
在这里插入图片描述

数据异步加载的柱状图

var myChart1 = echarts.init(document.getElementById('main2'),'dark');
    //myChart.showLoading();
    var time=[];
    var values=[];
    //通过ajax异步获取数据
    function fetchData(cb){
        $.ajax({
            type:"post",
            async:false,
            url:"/getNumByDatem",
            data:{},
            dataType:"json",
            success:function(result){
                if(result){
                    for(var i=0;i<result.length;i++)
                    {
                    //将数据写入列表中
                        time.push(result[i].date);
                        values.push(result[i].num);
                    }
                }
            },
            error:function(errorMsg){
                alert("失败！");
                myChart1.hideLoading();
            }
        });
        //定义异步加载时间
        setTimeout(function(){
            cb({
                time:time,
                values:values
            });
        },1000);
    }
    //先初步定义一个option，其中数据为空
    var option={
        title:{
            text:'系统近7天上传视频数量'
        },
        tooltip:{},
        toolbox: {
            show : true,
            feature : {
                mark : {show: true},
                dataView : {show: true, readOnly: false},
                magicType : {show: true, type: ['line', 'bar']},
                restore : {show: true},
                saveAsImage : {show: true}
            }
        },
        legend:{
            data:['视频数量']
        },
        xAxis:{
            data:[]
        },
        yAxis:{},
        //series定义图表为柱状图
        series:[{
            name:'视频数量',
            type:'bar',
            data:values
        }]
    };
    //显示加载动画
    myChart1.showLoading();
    //通过fetchData获取从后端传来的数据并重新设置option，写入数据
    fetchData(function(data){
        myChart1.hideLoading();
        myChart1.setOption({
            xAxis:{
                data:data.time
            },
            series:[{
                name:'视频数量',
                data:data.values
            }]
        });
    });
    option&&myChart1.setOption(option);

显示效果：
在这里插入图片描述
在这里插入图片描述

堆叠条形图

<script type="text/javascript">
    var myChart4 = echarts.init(document.getElementById('main5'),'dark');
    var time2=[];
    var pre=[];
    var sub=[];
    var post=[];
    $.ajax({
        type:"post",
        async:false,
        url:"/getNumBytype",
        data:{"type":"preProcess"},
        dataType:"json",
        success:function(result){
            if(result){
                for(var i=0;i<result.length;i++)
                {
                    time2.push(result[i].date);
                    pre.push(result[i].num);
                }

            }
        },
        error:function(errorMsg){

        }
    });
    //...同样以ajax的方式获取合成处理postProcess、字幕处理subProcess的数据,在此省略
    var option={
		//提示框组件
        tooltip: {
            trigger: 'axis',
            axisPointer: {    // 坐标轴指示器，坐标轴触发有效
                type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
            }
        },
        legend: {
            data: ['预处理', '合成处理', '字幕处理']
        },
        toolbox: {
            show : true,
            feature : {
                mark : {show: true},
                dataView : {show: true, readOnly: false},
                restore : {show: true},
                saveAsImage : {show: true}
            }
        },
        //图表定位
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis: {
            type: 'value'
        },
        yAxis: {
            type: 'category',
            data: time
        },
        series: [
            {
                name: '预处理',
                type: 'bar',
                stack: '总量',
                label: {
                    show: true,
                    position: 'insideRight'
                },
                data: pre
            },
            {
                name: '合成处理',
                type: 'bar',
                stack: '总量',
                label: {
                    show: true,
                    position: 'insideRight'
                },
                data: post
            },
            {
                name: '字幕处理',
                type: 'bar',
                stack: '总量',
                label: {
                    show: true,
                    position: 'insideRight'
                },
                data: sub
            }
        ]
    };
    option && myChart4.setOption(option);
</script>

显示效果:
在这里插入图片描述

总结

echarts更多特性可参考官方文档：https://echarts.apache.org/zh/index.html

小花不写代码
关注
专栏目录
ECharts使用指南
weixin_52546522的博客
03-17 633
第一步，引入ECharts： echars的引入十分简单，只需要在html中嵌入即可： <!DOCTYPE html> <html> <head> <script src="echarts.min.js"></script> </head> </html> echarts.min.js从官网下载 此时echarts.min.js保存在html文件同目录下 如果不想在本地保存echart.js文件，可以采用cdn引
ECharts绘制图表
m0_56628949的博客
09-28 4672
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 开发工具与关键技术：开发工具VS；关键技术js 作者：空白 撰写时间：2021年9月28日 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 首先，要将ECharts的脚本文件引入在项目中 在绘图前我们需要为ECharts准备一个定义了高度的DOM容器 在页面加载完后调用setWidth方法 .
echarts绘制各种图表(柱形、折线、柱形、饼图、南丁格尔、环形、中国地图散点图、百度地图散点图、词云图)
ccxcuixia
02-15 6048
文末附带github本文所有源代码，以及bmap.js,china.js,echarts.js,echarts-wordcloud.js文件啦 1.柱形图 先来看看效果啦 重要代码如下所示，必须引入echarts.js文件，之后初始化echarts,最终的是修改option中的配置项与数据，echarts学习网页，这里面有许多配置项，根据你的需要修改啦 <head> <...
Echarts—简单入门
QAQ_0v0的博客
10-10 308
Echarts—简单入门页面引入Echarts绘制一个简单的图表 页面引入Echarts ECharts 3 开始只需要像普通的 JavaScript 库一样用 script 标签引入即可。 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <!-- 引入 ECharts 文件 --> <script src="echarts.min.js"></sc
用ECharts绘制图表
julyclj55555的博客
10-19 792
登陆百度地图开发者平台，http://lbsyun.baidu.com/ 申请百度地图JavaScript API密钥 http://lbsyun.baidu.com/apiconsole/key/create，477rLYQ2vK12ZV8u0MFuQbft36dDCBnL 学习如何开发：http://lbsyun.baidu.com/index.php?title=jspopular/g...
一、Echarts创建图表，简单设计参数
qq_38736058的博客
11-24 192
从官网下载界面：http://echarts.baidu.com/download.html选择你需要的版本下载，根据开发者功能和体积上的需求，提供了不同打包的下载，如果你在体积上没有要求，可以直接下载完整版本。开发环境建议下载源代码版本，包含了常见的错误提示和警告。 1.进行引用，以完整版为例，只需要像普通的 JavaScript 库一样用 script 标签引入。 &amp;amp;lt;script src...
ECharts的使用
Cyl0110的博客
02-28 424
1，安装echarts npm install echarts --save //我自己用这个指令时安装到中间就卡住，所以用的cnpm cnpm install echarts --save //cnpm安装指令，用之前先切换淘宝镜像 npm config set registry http://registry.npm.taobao.org/ //切换淘宝镜像 2，引入使用 <template> <div ref="myChart" ...
echarts考试分数统计图表实例
07-24
本实例"echarts考试分数统计图表实例"就是基于ECharts进行的一种数据可视化的实践，它利用Vue.js框架来构建，并展示了如何使用ECharts绘制不同的图表类型。 首先，我们来看雷塔图（Radar Chart）。雷塔图是一种多维...
echarts绘制地图 json文件
02-21
在ECharts中，如果我们需要绘制地图，那么就需要用到特定的地图JSON文件。这些JSON文件包含了地理坐标信息，使得ECharts能够将数据与地理位置对应起来，形成交互式地图。 地图JSON文件在ECharts中的作用至关重要，...
Vue 之 echarts 图表数据可视化常用的一些图表动态图表3D图表的简单整理
08-05
相关说明地址： vue 中添加 echarts ，然后在 vue 中简单使用一些 echarts中常用的图表，包括一些动态的图表、3D的图表等 ，如果有不足之处，欢迎指出，或者你有更好的方法，欢迎留言。
echarts3 使用总结（绘制各种图表,地图）
08-31
【ECharts3 使用详解——绘制各种图表与地图】 ECharts 是一个基于 JavaScript 的开源可视化库，广泛应用于数据可视化场景，包括但不限于柱状图、折线图、饼图以及地图等。ECharts3 是其第三个主要版本，提供了丰富...
Echars饼图入门
halfgod的博客
11-29 510
function gridShowInfo(values){ var myChart = echarts.init(document.getElementById('gridChars')); // 显示标题，图例和空的坐标轴 myChart.setOption({ // title : { // text : '栅格详情', // subtext : '', // x :...
echarts多图控制
JHLIN的博客
11-27 1869
var x=[],_x=[],_series=[],_i=0,leftGrid=[[{ left: "60px",right: "4%",height: '80%',top:116, }],[{ left: "60px",right: "4%",height: '35%',top:116, }, { left: ...
echarts的事件
神zhi殇的博客
06-04 1551
this.charts.dispose() // 销毁实例，销毁后实例无法再被使用。 this.charts.clear() // 清空当前实例，会移除实例中所有的组件和图表。清空后调用 getOption 方法返回一个{}空对象。 this.charts.resize() // 改变图表尺寸，在容器大小发生改变时需要手动调用。 this.charts.setOpt...
vue中使用echarts画一个生命周期图
木木木不哭的博客
03-23 437
使用echarts画一个周期图
一篇文章带你搞定所有Echarts可视化图表
qq_41765777的博客
12-05 2786
可视化图表种类如此之多，什么场景下应该用什么图表展示，是一个让人头秃的难题。本篇文章带你从ECharts安装使用到配置各种样式的ECharts图表。ECharts官网Apache ECharts，一款基于JavaScript的数据可视化图表库，提供直观，生动，可交互，可个性化定制的数据可视化图表。
Echarts图表绘制，小白看了不迷路
weixin_55739922的博客
09-28 552
快速上手中学习如何绘制一个简单的图标？ Echarts插件就是一个很好的选择，ECharts 是一个使用 JavaScript 实现的免费商用的开源可视化库，内容包含行业内各种图示图标，可满足各种需求。在使用前我们可以到官网下载echarts.min.js或echarts.js 并用 2．基于准备好的DOM容器，开始通过echarts.init方法 初始化一个echarts实例配置项 var mychar =echarts.init(document.getElementbyId("main")); 3.
Echarts笔记——散点图（1）BMI涟漪散点图
XIATWO
03-30 1756
Echarts笔记——散点图（1）BMI涟漪散点图 1. 基础散点图类型（scatter) , 涟漪散点图 ( effectScatter ) 。 2. 设置涟漪动画（ rippleEffect ） <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>散点图</title> <script src="..
ECharts可视化教程（包含用ECharts生成图时配置项参数说明以及用ECharts做可视化大屏案例）
最新发布
manfanying的博客
04-03 5694
ECharts可视化教程（包含用ECharts生成图时配置项参数说明以及用ECharts做可视化大屏案例）
在VUE中如何使用Echarts 绘制图表
05-24
在 Vue 中使用 Echarts 绘制图表，可以按照以下步骤进行： 1. 安装 Echarts 可以使用 npm 或者 yarn 安装 Echarts，命令如下： ``` npm install echarts --save ``` 或者 ``` yarn add echarts ``` 2. 引入 ...
评论 6
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值