Echarts数据可视化框架

最新推荐文章于 2024-05-13 21:58:27 发布

whatistheanswer

最新推荐文章于 2024-05-13 21:58:27 发布

阅读量739

点赞数

分类专栏： Web前端开发文章标签： echarts 前端 javascript

本文链接：https://blog.csdn.net/whatistheanswer/article/details/126662142

版权

Echart数据库可视化架构

1下载使用

在html的head标签中引入文件

<html>
   <head>
    <meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<script type="text/javascript" src=".echarts.js"></script>
	<title></title>
   </head>
</html>

2节点数据绑定与配置

echart中的数据绑定都需要与html中的节点相关

<div id="main" style="width:600px height:400px">
<script>
//主题
var myEcharts=echarts.inti(dom,'dark')

option={
     
   //全局调色的设定
   color:[
     '#adcffff'
   ]
   title:{
     
    text:'销量表'
   },
   xAxis:{
     
   data:['衬衫','羊毛衫','大衣','棉袄']
   },
   yAxis:{
     },
   series:[
   {
     
      name:'销量',
      type:'bar',
      data:[15,20,35,5]
   }
   ]
};
//使用定义的配置渲染图表
</script>

图片中具体配置以及作用

名称	作用
xAxis	横轴
yAxis	纵轴
legend	图例用作图表的注释
series	指定图的类型和数值样式，展示有多种数据时用{}括起来

图表的类型

名称	作用
bar	柱状图
category	折线图
pei	饼状图
series	散点图

式例
在这里插入图片描述
参考代码

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<script type="text/javascript" src="./js/echarts.js"