基于js+echarts实现数据可视化，2024年最新c语言毕业程序设计

• 初始化echarts实例对象

• 指定配置项和数据(option)

• 将配置项设置给echarts实例对象

下面是一个简单的实例

第一步

第二步

第三步

第四步

第五步

最终的效果

仅仅会插入图表也是不够的，通过修改里面的配置项里面的属性来达到项目需求，直接去百度更方便，但是呢我们需要学会去查找文档echarts官网-文档-配置项手册

上面这个小例子就是为了让大家对echarts不迷茫，基本使用要会哟

三、知识点梳理

=======

再回到我们的项目上面，从项目效果可以看出里面的参数很多，如果都去重新定义一个新的变量的话，代码很多容易混淆，占用的空间也很大，这里呢 我们就使用立即执行函数

立即执行函数：

---

声明一个函数，并马上调用这个匿名函数就叫做立即执行函数；即立即执行函数是定义函数以后立即执行该函数。

()()

里面定义的参数相对于是局部变量，即使变量名相同，也不会有影响的，所以就放心使用吧

项目里面每个盒子的边框不再是中规中矩的border了，之所以看起来很高级，那是因为边框里面有图片哟，大家不要觉得很难，因为它真的很简单

边框图片

---

边框效果图：

首先来了解下边框图片需要掌握的属性

属性	说明
border-image-source	用在边框的图片的路径
border-image-slice	图片边框内向偏移 裁剪的尺寸，一定不加单位，上右下左顺序进行裁剪
border-image-width	图片边框的宽度（需要加单位）注意：不是边框的宽度而是边框图片的宽度
border-image-repeat	图片边框是否平铺（repeat）、铺满（round）、或拉伸（stretch）默认拉伸

我们来看看border-image-repeat属性值不同的效果

你好

分割多少，就以四个角图片的完整度来哟

很多人会疑惑🤔  为什么还要在box盒子里面放一个inner盒子呢，注意看由于盒子模型的原因 如果直接写文字，文字的书写位置就达不到我们想要的这种效果，所以通过在边框里面再添加一个子盒子，利用定位 ，里面的内容就可以改变位置啦，快去试一试吧

字体图标

---

这里为什么要将字体图标呢，以前我们使用字体图标非常的麻烦 ，这里教给大家一种新的方法：通过类名调用字体图标

使用步骤

• HTML页面引入字体图标中css文件

• 标签直接调用图标对应的类名即可

老规矩，还是用一个简单的例子 这样大家就不用迷茫了，博主辛辛苦苦的为大家书写例题，一定要三步曲哟

类名是怎么来的呢：直接在style.css里面复制

效果图：

修改线性渐变色方法

---

图中的统计图呈现的是一个颜色渐变的效果 看起来很好看 一起来看看它是如何实现的吧

效果图：

注意修改的是option对象里面的color属性哟

方法一：提倡这种方法 比较简单

color:new echarts.graphic.LinearGradient(

//(x1,y2）点到点（x2,y2）之间进行渐变

0，0，0，1，

[

{offset:0,color:‘#00fffb’ },//0起始颜色

{offset:1,color:‘#0061ce’ },//1结束颜色

]

),

方法二：

// 修改线性渐变色方式 2

color: {

type: ‘linear’,

x: 0,

y: 0,

x2: 0,

y2: 1,

colorStops: [{

offset: 0, color: ‘red’ // 0% 处的颜色

}, {

offset: 1, color: ‘blue’ // 100% 处的颜色

}],

globalCoord: false // 缺省为 false

},

销售额统计模块

========

这个模块也是这个项目的一个难点；根据年、季、月、周的切换下面的数据相应的改变

效果图 ：

前提是给我们的盒子添加对应的属性

        <div class="sales panel">

            <div class="inner">

                <div class="caption">

                    <h3>销售额统计</h3>

                    <a href="javascript:;" class="active" data-type="year">年</a>

                    <a href="javascript:;" data-type="quarter">季</a>

                    <a href="javascript:;" data-type="month">月</a>

                    <a href="javascript:;" data-type="week">周</a>

                </div>

                <div class="chart">

                    <div class="label">单位:万</div>

                    <div class="line"></div>

                </div>

            </div>

        </div>

现将我们的数据提前准备，等我们学到后面的时候，这些数据就是从后台实时获取的，因为现在没有学到，所以现在就是写死我们的数据

var data = {

  year: [

    [24, 40, 101, 134, 90, 230, 210, 230, 120, 230, 210, 120],

    [40, 64, 191, 324, 290, 330, 310, 213, 180, 200, 180, 79]

  ],

  quarter: [

    [23, 75, 12, 97, 21, 67, 98, 21, 43, 64, 76, 38],

    [43, 31, 65, 23, 78, 21, 82, 64, 43, 60, 19, 34]

  ],

  month: [

    [34, 87, 32, 76, 98, 12, 32, 87, 39, 36, 29, 36],

    [56, 43, 98, 21, 56, 87, 43, 12, 43, 54, 12, 98]

  ],

  week: [

    [43, 73, 62, 54, 91, 54, 84, 43, 86, 43, 54, 53],

    [32, 54, 34, 87, 32, 45, 62, 68, 93, 54, 54, 24]

  ]

年、季、月、周的自动切换

//切换

$('.sales .caption').on('click', 'a', function () {

  //样式

  index = $(this).index() - 1;

  $(this).addClass("active").siblings("a").removeClass("active");

  var currDate = data[this.dataset.type];

  console.log(currDate);

  option.series[0].data = currDate[0];

  option.series[1].data = currDate[1];

  // 重新配好的数据给实例对象

  myChart.setOption(option)

})

根据tab的切换 获取相应的数据

var as = $(“.sales .caption a”);

var index = 0;

var timer = setInterval(function () {

  index++;

  if (index >= 4) {

    index = 0;

  }

  as.eq(index).click();

}, 1000)

//鼠标进入停止定时器，离开，开启定时器

$(".sales").hover(function () {

  clearInterval(timer);

}, function () {

  clearInterval(timer);

  timer = setInterval(function () {

    index++;

    if (index >= 4) {

      index = 0;

    }

    as.eq(index).click();

  }, 1000);

})

半圆形做法

---

前面只是教大家如何使用echarts图表，但是这种半圆里面是没有的，需要我们自己自己通过它提供的扇形图 自己修改 ，本质还以一个饼形

效果图：

做法：把一个饼形图分成三段，下面一段颜色设置为透明色即可，做一个拱形离不开的是将不透明的那一部分旋转正，在series里面设置调角度 其默认的角度是90度

startAngle :180 /起始角度，支持的范围是[0，360]

注意：此角度不是旋转角度，而是起始角度，

我们先来看看饼图的起始角度

自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数同学面临毕业设计项目选题时，很多人都会感到无从下手，尤其是对于计算机专业的学生来说，选择一个合适的题目尤为重要。因为毕业设计不仅是我们在大学四年学习的一个总结，更是展示自己能力的重要机会。

因此收集整理了一份《2024年计算机毕业设计项目大全》，初衷也很简单，就是希望能够帮助提高效率，同时减轻大家的负担。

既有Java、Web、PHP、也有C、小程序、Python等项目供你选择，真正体系化！

由于项目比较多，这里只是将部分目录截图出来，每个节点里面都包含素材文档、项目源码、讲解视频

如果你觉得这些内容对你有帮助，可以添加VX：vip1024c （备注项目大全获取）

60]

注意：此角度不是旋转角度，而是起始角度，

我们先来看看饼图的起始角度

自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数同学面临毕业设计项目选题时，很多人都会感到无从下手，尤其是对于计算机专业的学生来说，选择一个合适的题目尤为重要。因为毕业设计不仅是我们在大学四年学习的一个总结，更是展示自己能力的重要机会。

因此收集整理了一份《2024年计算机毕业设计项目大全》，初衷也很简单，就是希望能够帮助提高效率，同时减轻大家的负担。
[外链图片转存中…(img-uNZSEui5-1712563883015)]
[外链图片转存中…(img-NPouuTqE-1712563883015)]
[外链图片转存中…(img-lnZTVHWO-1712563883016)]

既有Java、Web、PHP、也有C、小程序、Python等项目供你选择，真正体系化！

由于项目比较多，这里只是将部分目录截图出来，每个节点里面都包含素材文档、项目源码、讲解视频

如果你觉得这些内容对你有帮助，可以添加VX：vip1024c （备注项目大全获取）
[外链图片转存中…(img-IJbCumdQ-1712563883016)]