Echarts数据可视化框架
2024-07-02 03:45:27
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"></script><title></title>
</head>
<body><div id="mid_box1" style="width: 1200px; margin: auto;"><div id="mybar1" style="width:600px;height: 400px; float: left;"></div><div id="mypei1" style="width:600px;height:400px;float: right;"></div></div><div id="mid_box2" style="margin: auto; width: 1200px;"><div id="mybar2" style="width:600px;height: 400px; float: left;"></div><div id="myscatter" style="width:600px;height:400px;float: right;"></div></div><div id="mid_box3" style="margin: auto; width: 1200px;"><div id="mybar3" style="width:600px;height: 400px; float: left;"></div><div id="myline" style="width:600px;height:400px;float: right;"></div></div> <script type="text/javascript">var zhuzhuangtu=echarts.init(document.getElementById('mybar1'));//柱状图var diezhuangtu=echarts.init(document.getElementById('mybar2'));//叠状图var bingzhuangtu=echarts.init(document.getElementById('mypei1'));var sandiantu=echarts.init(document.getElementById('myscatter'));//散点图var zhuzhuangtu2=echarts.init(document.getElementById('mybar3'));//柱状排序var zhexiantu=echarts.init(document.getElementById('myline'));//柱状排序var option1={title:{text:'柱状图'},tooltip:{},legend:{data:['销量']},xAxis: {data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']},yAxis: {},series: [{name: '销量',type: 'bar',data: [5, 20, 36, 10, 10, 20]}]};//也可以使用命令npm install echarts安装echarts模块//使用刚指定配置渲染zhuzhuangtu.setOption(option1);var option2={series:[{ type:'pie',data:[{value:20,name:'报纸'},{value:40,name:'杂志'},{value:50,name:'期刊'}]}]};bingzhuangtu.setOption(option2);var option3={title:{text:'叠桩图'},tooltip:{},legend:{data:['1月销量','2月销量']},xAxis: {data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']},yAxis: {},series: [{name: '1月销量',type: 'bar',data: [5, 20, 36, 10, 10, 20],stack:'x'},{name: '2月销量',type: 'bar',data: [5, 20, 36, 10, 10, 20],stack:'x'}]};diezhuangtu.setOption(option3);var option4={title:{text:'散点图'},xAxis: {data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']},yAxis: {},series: [{name: '1月销量',type: 'scatter',data: [5, 20, 36, 10, 10, 20],stack:'x'},{name: '2月销量',type: 'scatter',data: [5, 20, 36, 10, 10, 20],stack:'x'}]};sandiantu.setOption(option4);var option5={title:{text:'纵向柱状图'},xAxis: {max:'dataMax'//用横轴数据作为最大值},yAxis: {type:'category',data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子'],},series: [{name: '销量',type: 'bar',data: [5, 20, 36, 10, 10, 20],label:{show:true,position:'right'}}],legend:{data:['销量']}};zhuzhuangtu2.setOption(option5);var option6={title:{text:'折线图'},xAxis: {type:'category',data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子'],},yAxis: {type:'value'},series: [{name: '销量',type: 'line',data: [5, 20, 36, 10, 10, 20],}],legend:{data:['销量']}};zhexiantu.setOption(option6);</script>
</body>
</html>
Echarts数据可视化框架相关推荐
- echarts 折线上写数值_前端ECharts数据可视化图表案例与介绍
什么是ECharts? ECharts,一个使用 JavaScript 实现的开源可视化库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(IE8/9/10/11,Chrome,Fire ...
- Echarts数据可视化grid直角坐标系（xAxis、yAxis）
mytextStyle={color:"#333", //文字颜色fontStyle:"normal", //italic斜体 oblique倾斜fontWei ...
- Echarts数据可视化全解
全栈工程师开发手册 (作者:栾鹏) Echarts数据可视化开发代码注释全解 Echarts数据可视化开发参数配置全解 6大公共组件: Echarts数据可视化visualMap全解 Echarts数 ...
- Echarts数据可视化event图表事件的相关操作，开发全解+完美注释
全栈工程师开发手册 (作者:栾鹏) Echarts数据可视化开发代码注释全解 Echarts数据可视化开发参数配置全解 6大公共组件详解(点击进入): title详解. tooltip详解.toolb ...
- Echarts数据可视化action图表行为的相关操作，开发全解+完美注释
全栈工程师开发手册 (作者:栾鹏) Echarts数据可视化开发代码注释全解 Echarts数据可视化开发参数配置全解 6大公共组件详解(点击进入): title详解. tooltip详解.toolb ...
- Echarts数据可视化echarts实例的相关操作，开发全解+完美注释
全栈工程师开发手册 (作者:栾鹏) Echarts数据可视化开发代码注释全解 Echarts数据可视化开发参数配置全解 6大公共组件详解(点击进入): title详解. tooltip详解.toolb ...
- Echarts数据可视化开发参数配置全解
全栈工程师开发手册 (作者:栾鹏) Echarts数据可视化开发代码注释全解 Echarts数据可视化开发参数配置全解 github源码地址:https://github.com/626626cdll ...
- Echarts数据可视化series-scatter散点图，开发全解+完美注释
全栈工程师开发手册 (作者:栾鹏) Echarts数据可视化开发代码注释全解 Echarts数据可视化开发参数配置全解 6大公共组件详解(点击进入): title详解. tooltip详解.toolb ...
- Echarts数据可视化series-radar雷达图，开发全解+完美注释
全栈工程师开发手册 (作者:栾鹏) Echarts数据可视化开发代码注释全解 Echarts数据可视化开发参数配置全解 6大公共组件详解(点击进入): title详解. tooltip详解.toolb ...
最新文章
- micro-job 0.0.2 发布，分布式任务调度框架
- hibernate数据的三种存在状态（只与事务有关）
- MySQL账户安全设置
- Java集合之LinkedHashMap源码分析
- Linux shell脚本的建立与执行
- 多目标进化优化_科研一角|论文分享 | 等离子喷焊工艺参数多目标优化
- 水中机器人电控方案设计
- python 游戏引擎 cocos2d_2.2 完成一个Cocos2d游戏程序代码
- 微服务化之无状态化和容器化
- h5打印时如何控制打印区域（基于jquery.PrintArea.js实现）
- css动画让箭头上下跳动
- 如何优雅地实现C++编译期多态？
- bootstrap dialog自行控制窗口的关闭
- IE打开报错,提示该内存不能为read的解决办法!
- oracle 报错ins 32008,oracle升级报错ins—32027
- 我到底能干什么！！！！
- 求Miu函数， 找规律
- javascript版谷歌身份验证器google authenticator
- 机器学习回归（regression）——线性回归（Hung-yi Lee）
- 大物下第9章熟记内容