echarts数据可视化项目搭建（二）

最新推荐文章于 2025-04-27 10:26:26 发布
最新推荐文章于 2025-04-27 10:26:26 发布
阅读量1.1k 收藏 1
点赞数
分类专栏： 前端 文章标签： echarts 信息可视化 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/m0_54510474/article/details/128764218
版权
本文介绍ECharts图表的高级配置技巧，包括主题设置、自定义调色盘、颜色渐变、图表自适应、加载动画及增量动画实现方法，并提供简单动画配置选项说明。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

目录

本博客内容参考黑马课程，详细信息请参考以下网址

主题设置

默认主题

重点

//通过echarts.init方法设置light、dark两种默认主题
echarts.init(document.getElementById("canvas_area"),"dark")

示例

<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" />
    <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.4.1/echarts.js"></script>
    <title>柱状图</title>
  </head>
  <body>
    <div style="width: 600px; height: 400px" id="canvas_area"></div>
  </body>
  <script>
    var myChart = echarts.init(document.getElementById("canvas_area"), "dark"); //暗色主题
    // var myChart = echarts.init(document.getElementById("canvas_area"), "light");//亮色主题
    var option = {
      title: {
        text: "期末考试成绩",
        link: "https://www.baidu.com",
        textStyle: {
          color: "gray",
          fontStyle: "normal",
        },
      },
      xAxis: {
        // x轴
        type: "category", //类目轴
        data: ["张三", "李四", "王五"],
      },
      tooltip: {},
      yAxis: {
        //y轴
        //数值轴
        type: "value",
      },
      series: [
        //系列列表
        {
          name: "语文",
          type: "bar",
          data: [40, 50, 60],
        },
      ],

      // myChart.setOption(option);
    };
    myChart.setOption(option);
  </script>
</html>

效果

在这里插入图片描述

自定义主题

步骤

调色盘

一组颜色，图形、主题等都会自动从中选择颜色

主题

自定义主题时，其中的调色盘

全局

配置在Option配置项中

var option={
  color:['red','green',...]
  ...
}

局部

设置在series配置项中

 var option={
 	series:[{
 		type:'bar',
 		color:['red','green',...],
 		...
 	}]
 }

颜色渐变

线性渐变

itemStyle:{
	color:{
		type:'linear',
		x:0,
		y:0,
		x2:0,
		y2:1,
		colorStops:[{
			offset:0,
			color:'gray'
		},{
			offset:1,
			color:'green'
		}],
	}
}

效果
在这里插入图片描述

径向渐变

itemStyle:{
	color:{
		type:'radial',
		x:0.5,
		y:0.5,
		r:0.5,
		colorStops:[{
			offset:0,
			color:'gray'
		},{
			offset:1,
			color:'green'
		}]
	}
}

效果
在这里插入图片描述

可视化图表自适应

重点

//写法一：监听窗口变化事件并调用echarts中的resize()函数
// window.onresize = function () {
//   myChart.resize();
// };
//写法二
window.onresize = myChart.resize;

示例

<script>
  var myChart = echarts.init(document.getElementById("canvas_area"));
  var option = {
    title: {
      text: "期末考试成绩",
      link: "https://www.baidu.com",
      textStyle: {
        color: "gray",
        fontStyle: "normal",
      },
    },
    xAxis: {
      // x轴
      type: "category", //类目轴
      data: ["张三", "李四", "王五"],
    },
    yAxis: {
      //y轴
      //数值轴
      type: "value",
    },
    series: [
      //系列列表
      {
        name: "语文",
        type: "bar",
        data: [40, 50, 60],
      },
    ],
  };
  myChart.setOption(option);
  //图表随着浏览器窗口大小自适应变化，写法一
  // window.onresize = function () {
  //   myChart.resize();
  // };
  //写法二
  window.onresize = myChart.resize;
</script>

效果
在这里插入图片描述

实现简单的加载动画

重点

// myChart.showLoading();两者在合适的时机进行显示和隐藏
// myChart.hideLoading();

示例

<!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>地图实现</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.4.1/echarts.js"></script>
  </head>
  <body>
    <div id="canvas" style="width: 600px; height: 400px"></div>
  </body>
  <script>
    // series下新增一个对象
    // 准备数据散点，配置给series下的另一个对象
    var scatter_data = [
      {
        value: [117, 31],
      },
    ];
    // 配置series下的新对象type值为effectScatter
    // 指明散点图的坐标系统为geo
    // 调整涟漪动画
    var myChart = echarts.init(document.getElementById("canvas"));
    var url = "https://geo.datav.aliyun.com/areas_v3/bound/100000_full.json";
    myChart.showLoading();//ajax请求前显示加载动画
    $.get(url, function (resp) {
      myChart.hideLoading();//数据请求成功后隐藏加载动画
      //使用ajax获取矢量地图数据
      console.log(resp);
      //生成随机数据
      let eachdata = new Array();
      for (i = 0; i < resp["features"].length; i++) {
        name = resp["features"][i]["properties"].name;
        // console.log(name);
        value = Math.round(Math.random() * 100);
        eachdata.push({ name: name, value: value });
        // console.log(eachdata);
      }
      echarts.registerMap("chinamap", resp); //在ajax函数中注册地图矢量数据
      var option = {
        //配置数据
        series: [
          {
            data: eachdata,
            geoIndex: 0, //将数据与第0个geo配置关联在一起
            type: "map",
          },
          {
            data: scatter_data,
            type: "effectScatter",
            coordinateSystem: "geo",
            rippleEffect: {
              scale: 10,
            },
          },
        ],
        //地图显示关键点
        visualMap: {
          min: 0,
          max: 110,
          inRange: {
            color: ["white", "red"], //设置颜色渐变效果
          },
          calculable: true, //出现滑块
        },
        //配置geo的type为map
        geo: {
          type: "map",
          map: "chinamap",
          roam: true, //设置缩放以及拖动效果
          label: {
            show: false, //展示标签
          },
        },
      };
      myChart.setOption(option);
    });
  </script>
</html>

效果
在这里插入图片描述

增量动画实现

重点

//在数据更新之后，生成新的Option，然后使用echarts的setOption进行数据更新
//注意，新生成的option与原option是合并关系而并非覆盖关系
$("#add-data").click(function () {
  name_list.push("小张");
  data_list.push(90);
  var option = {
    xAxis: {
      data: name_list,
    },
    series: [
      {
        data: data_list,
      },
    ],
  };
  myChart.setOption(option);
});

示例

<!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" />
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.4.1/echarts.js"></script>
    <title>柱状图之增量动画</title>
  </head>
  <body>
    <div style="width: 600px; height: 400px" id="canvas_area"></div>
    <!-- <div id="canvas_area" style="height: 400px"></div> -->
    <button id="change-data">改变数据</button>
    <button id="add-data">增加数据</button>
  </body>
  <script>
    var myChart = echarts.init(document.getElementById("canvas_area"));
    var name_list = ["张三", "李四", "王五"];
    var data_list = [40, 50, 60];
    var option = {
      title: {
        text: "期末考试成绩",
        link: "https://www.baidu.com",
        textStyle: {
          color: "gray",
          fontStyle: "normal",
        },
      },
      xAxis: {
        // x轴
        type: "category", //类目轴
        data: name_list,
      },
      yAxis: {
        //y轴
        //数值轴
        type: "value",
      },
      series: [
        //系列列表
        {
          name: "语文",
          type: "bar",
          data: data_list,
          markPoint: {
            data: [
              {
                type: "max",
                name: "最大值",
              },
              {
                type: "min",
                name: "最小值",
              },
            ],
          },
          markLine: {
            data: [
              {
                type: "average",
                name: "平均值",
              },
            ],
          },
          label: {
            show: true,
            position: "inside",
          },
        },
      ],
    };
    myChart.setOption(option);
    $("#add-data").click(function () {
      name_list.push("小张");
      data_list.push(90);
      var option = {
        xAxis: {
          data: name_list,
        },
        series: [
          {
            data: data_list,
          },
        ],
      };
      myChart.setOption(option);
    });
    $("#change-data").click(function () {
      data_list = [40, 50, 90];
      var option = {
        series: [
          {
            data: data_list,
          },
        ],
      };
      myChart.setOption(option);
    });
  </script>
</html>

效果
在这里插入图片描述

简单动画配置项

var option={
	animation:true;//动画是否开启
	//animationDuration:2000,//动画时长，单位：毫秒
	animationDuration:function(arg){
		return 2000*arg;
	},
	animationEasing:'linear',//动画变化是否均匀 bounceOut回弹效果
	...
}

关于全局echarts对象和echartsInstance对象

var myChart = echarts.init(document.getElementById("canvas_area"));

全局echarts对象就是通过引入js文件后可直接使用的对象，如上面的echarts
echartsInstance对象就是调用echarts.init()方法返回的对象，如上面的变量myChart

echarts.connect()

将多个图表进行拼接

echarts.connect([myChart1,myChart2]);

其他echarts实例对象方法

on/off绑定和解绑事件处理函数

myChart.on('click',function(arg){
	console.log(111);
	console.log(arg);
})

dispatchAction 触发某些行为

myCharts.dispatchAction({
	type:'highlight',//事件类型
	seriesIndex:0,//图表索引
	dataIndex:1//高亮位置
})
数据可视化Echarts—— 案例：立可得-智能看板
weixin_52819925的博客
08-21 7454
案例：立可得-智能看板 项目介绍 应对现在数据可视化的趋势，越来越多企业需要在很多场景(营销数据，生产数据，用户数据)下使用，可视化图表来展示体现数据，让数据更加直观，数据特点更加突出。我们引入 ‘立可得’ 数据可视化项目。 该项目除了使用了基础的DIV+CSS布局，还引入了一些C3技术，还引入了各类图表的绘制，以及高级的地图数据可视化案例。主要功能有：饼状图、柱状图、线形图、地图 … 使用技术 完成该项目需要具备以下知识： div + css 布局 flex 布局 css3动画 css3渐
ECharts数据可视化项目（简化版）
m0_52879657的博客
08-02 496
此项目是根据老师所提供项目修改实现的ECharts数据可视化项目 该项目使用了ECharts和Ajax，结合html、css、jquery所制作的项目。 项目地址：项目GitHub超链接 ECharts基础知识讲解 ECharts，一个使用 JavaScript 实现的开源可视化库，可以流畅的运行在 PC和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），底层依赖矢量图形库ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化图表。 官网
ECharts
small_rain_的博客
10-27 1249
转自黑马程序员pink老师 ## 可视化面板介绍 ​ 应对现在数据可视化的趋势，越来越多企业需要在很多场景(营销数据，生产数据，用户数据)下使用，可视化图表来展示体现数据，让数据更加直观，数据特点更加突出。 ### 01-使用技术 完成该项目需要具备以下知识： - div + css 布局 - flex 布局 - Less - 原生js + jquery 使用 - rem适配 - **echarts基础** ### 02- 案例适配方案 - 设计稿是1920px 1. f...
ECharts在线代码编辑器（在线预览，格式化，搜索，右键菜单，主题切换，代码解析）
最新发布
苏苏就是小苏苏的博客
04-27 448
ECharts合集更更更之实现在线代码编辑器（在线预览，格式化，搜索，右键菜单，主题切换，代码解析）
echarts数据可视化项目搭建（一）
m0_54510474的博客
01-27 1912
使用echarts实现一些基础的数据可视化案例
echarts的学习（一）快速上手,很快创建一个echarts的项目
一天不写代码难受的博客
01-01 1992
步骤1：引入echarts.js文件 步骤2：准备一个呈现图表的盒子 步骤3：初始化echarts实例对象 步骤4：准备配置项 步骤5：将配置项设置给echarts实例对象 第一步 网上下载echarts的js文件，因为我们要用人家的东西，所以要下载人家的东西，最后根据人家的规范进行写代码。 以上的这个就是我下载的js文件。 第二步 创建一个html文件，里面将这个echarts的js文件导入 <!-- 步骤1：引入echarts.js文件 --> <scr..
数据可视化——ECharts项目
weixin_42684860的博客
06-08 5187
此项目是根据pink老师的课程实现的ECharts数据可视化项目 项目地址： http://tq07.gitee.io/echarts Echarts基础知识 ECharts，一个使用 JavaScript 实现的开源可视化库，可以流畅的运行在 PC和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），底层依赖矢量图形库ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化图表。 官网地址：https://www.echartsjs.co.
21套-Echarts大屏HTML源码-数据可视化展板模板.zip
06-19
Echarts大屏HTML源码：数据可视化新篇章 在数字时代，数据可视化已成为沟通信息、洞察趋势的关键工具。为此，我们精心整理了一系列多套Echarts大屏HTML源码，旨在为您提供前沿的数据可视化展板模板。 这些源码基于...
16套-Echarts大屏HTML源码-数据可视化展板模板.zip
06-12
此外，这些源码模板还具备高度的可定制性和可扩展性，无论你是技术小白还是资深开发者，都能轻松上手，快速搭建出属于自己的数据可视化展板。 不要错过这份宝贵的数据可视化资源，它将成为你展示数据、分析数据的...
echarts数据可视化模板
03-07
**ECharts数据可视化模板详解** ECharts是一款由百度开源的，基于JavaScript的数据可视化库，它提供了丰富的图表类型，包括柱状图、折线图、饼图、散点图等，并支持自定义交互和动画效果，使得在Web端展示数据变得...
ECharts数据可视化版面.zip
11-29
数据可视化版面通常指的是在网页上用于展示数据的界面布局，而ECharts数据可视化版面则是指利用ECharts库构建的图表布局。在网页开发中，H5源码和H5模板是构建网页的基础，其中H5模板更是提供了一种快速搭建网页的...
基于SSM框架与Vue.js的Echarts可视化项目搭建与集成测试源码
02-11
Echarts是百度开源的一个数据可视化工具，它提供直观、生动、可交互、高度可定制的数据可视化图表。 本项目源码通过上述技术的整合，构建了一个高效的数据可视化平台。整个项目的搭建过程从项目初始化开始，涉及到...
Echarts图前端数据可视化展示
06-11
将百度Echarts中的option中的tooltip、legend、series等以对象的形式实现
ECharts数据可视化项目【1】
qq_40992225的博客
09-04 1689
分析一下我们的项目的布局情况我们的项目分成两个大的盒子，上下各一个，下面的盒子又分成左中右三个。下面开始我们的项目：新建上述文件夹和index.html文件再到css文件夹中新建index.less文件，保存以后通过easyless插件就会自动生成对应的css文件再将css文件引入到html文件中，就可以进行我们想要的内容了。首先要进行css的初始化在index.less里面我们这个页面采取的是rem+flexible.js适配方案来做，所以我们先来说一下案例的适配方案。
echarts项目总结
qq_44482048的博客
08-16 1019
一些echarts项目的基本步骤
ECharts数据可视化项目
优快云_Admin0的博客
09-08 859
​ 应对现在数据可视化的趋势，越来越多企业需要在很多场景(营销数据，生产数据，用户数据)下使用，可视化图表来展示体现数据，让数据更加直观，数据特点更加突出。D3.js 目前 Web 端评价最高的 Javascript 可视化工具库(入手难)ECharts.js 百度出品的一个开源 Javascript 数据可视化库Highcharts.js 国外的前端数据可视化库，非商用免费，被许多国外大公司所使用AntV 蚂蚁金服全新一代数据可视化解决方案 等等。
项目中使用echarts
weixin_46031207的博客
04-26 146
* 三、使用async修饰请求**
ECharts，项目进展
small_shadow的博客
11-14 192
项目情况 有了上次项目的经验，这次我们的目标明确了很多。先是一起讨论了下所需要的需求，具体需要什么样的数据，哪些功能，方便后端建表。然后是前端的分工，讨论页面整体的色调，怎样的布局，需要哪些东西，然后是具体的分工，谁负责哪一部分，及时交流。但是我们明显感觉到了前后端速度的区分，后端的接口差不多都写好了，但是前端页面还没准备好，还遇到了一些新的难题，基本上是一边写，一边学。 Echarts 因为这次前台东西特别少，所以后台呈现数据就显得很重要，我们决定用图表的形式来展现，直观且清晰。刚开始我是打算手写一个扇形
echarts分享(一):项目基础
天暮雨的博客
01-09 701
echarts项目开发中的东西
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

夺笋123

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值