数据可视化是什么？怎么使用echarts？

您所在的位置：网站首页 › 数据可视化的意思是什么 › 数据可视化是什么？怎么使用echarts？

数据可视化是什么？怎么使用echarts？

2024-07-15 10:09| 来源: 网络整理| 查看: 265

什么是数据可视化

数据可视化，就是将相对抽象的的数据通过可视的、交互的方式进行展示，从而形象而又直观地表达出数据蕴含的信息和规律。

简单来说，就是把复杂无序的数据用直观的图像展示出来，这样可以一下就能清晰的发现数据中潜藏的规律。当然啦，数据可视化，不仅仅是统计图表。本质上，任何能够借助于图形的方式展示事物原理、规律、逻辑的方法都叫数据可视化。

在开始使用数据可视化的库之前，先看看如何普通地绘制出图形

canvas

canvas是画布的意思，是html的一个标签，接下来绘制一段直线

这里canvas标签里设置宽高不需要写px，getContext('2d')方法说明这个画布是2d的 beginPath() 清楚路径的内容 moveTo() 线段的起点，lineTo()线段的终点 stroke() 开始绘制 closePath() 起始点和结尾点的坐标进行闭合 canvas绘制直线 canvas{ display: block; border: 2px solid pink; margin: 0 auto; } canvas const canvas = document.getElementById('canvas') const ctx = canvas.getContext('2d') ctx.beginPath() // 起点终点 ctx.moveTo(100,100) ctx.lineTo(300,300) // 开始绘制 ctx.stroke() ctx.closePath()

效果：

如果想改变线段的粗细，设置lineWidth属性，改变线段颜色，设置strokeStyle属性：

ctx.lineWidth = 10 ctx.strokeStyle = 'red'

折线的绘制只需要在后面再加一个点：

ctx.moveTo(100,100) ctx.lineTo(300,300) ctx.lineTo(500,200)

这里只是了解一下基本的使用，可以看出自己写的话比较麻烦，这时使用一个echarts库，这个库中已经包含了canvas渲染器

ECharts

如何使用呢？

下载echart.js，创建一个html文件，并引入这个js文件，我这里引入的是echarts.min.js，创建一个div

然后就可以通过 echarts.init 方法初始化一个 echarts 实例并通过 setOption 方法生成一个简单的柱状图，下面是完整代码 // 基于准备好的dom，初始化echarts实例 var myChart = echarts.init(document.getElementById('main')); // 指定图表的配置项和数据 var option = { title: { text: 'ECharts 入门示例' }, tooltip: {}, legend: { data: ['销量'] }, xAxis: { data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子'] }, yAxis: {}, series: [ { name: '销量', type: 'bar', data: [5, 20, 36, 10, 10, 20] } ] }; // 使用刚指定的配置项和数据显示图表。 myChart.setOption(option);

效果图：

这里就使用echarts完成了一个柱状图

echarts官网：echarts.apache.org/zh/index.ht…

里面有具体的使用方法，和许多例图的实现代码，可以直接拿来用，在具体的项目中使用时修改坐标轴的数据

以下是在我的项目中使用的例子：

首先观察例图的代码：

data数组中的数据便是饼图的数据，包括数据名字和数量比重，所以需要拿到数据库中的数据来替换这里的data

在echarts.js文件中写一个路由，获取数据库的数据 router.get("/bars", (req, res) => { const sql = `SELECT COUNT(*) AS count, nc_name FROM news,news_cate WHERE news.nc_id = news_cate.nc_id AND news.news_is_delete = '0' GROUP BY news.nc_id` db.query(sql, (err, results) => { if (err) return res.send({ code: 0, msg: err.message }) if (results != 0) { // console.log(results); res.send({ code: 1, // 把结果send出去，改名为data data: results }) } }) }) 使用ajax请求数据，这里封装了一个渲染数据的函数randerNew

部分html

新闻统计 function renderNew(data) { var myChart = echarts.init(document.querySelector('.new')); window.onresize = function () { myChart.resize(); }; myChart.setOption({ title: { text: 'Referer of a Website', subtext: 'Fake Data', left: 'center', show: false }, tooltip: { trigger: 'item' }, legend: { orient: 'vertical', left: 'left' }, series: [ { name: '新闻统计', type: 'pie', radius: ['40%', '50%'], // 这里的data是send出来的数据 data: data, emphasis: { itemStyle: { shadowBlur: 10, shadowOffsetX: 0, shadowColor: 'rgba(0, 0, 0, 0.5)' } } } ] }); } //新闻统计 $.ajax({ type: "GET", url: "/admin/echarts/bars", success: (res) => { // console.log(res); if (res.code == 1) { res.data.forEach(item => { item.value = item.count item.name = item.nc_name delete item.count delete item.nc_name }) // console.log(res.data); renderNew(res.data) } } }) 效果如下：

其他例图的使用方法类似

【本文地址】

数据可视化是什么？怎么使用echarts？

数据可视化是什么？怎么使用echarts？

今日新闻

推荐新闻