nodejs + echarts 图表展示

node服务端test.js代码：

var router = require('koa-router')();
// var echart = require('echarts');router.get('/',async(ctx)=>{var xAxis = ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"];var series = [5, 20, 200, 10, 10, 20];await ctx.render('admin/test/index',{xAxis,series});
})module.exports = router.routes();

前端页面index.html代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script src="{{__ROOT__}}/admin/assets/js/echarts.simple.min.js"></script>
</head>
<body>echarts Demo!<!--{{data1}}--><div id="main" style="width: 600px;height:400px;"></div><input id="xAxis" value="{{@xAxis}}" type="hidden"/><input id="series" value="{{@series}}" type="hidden" /><script type="text/javascript">// 基于准备好的dom，初始化echarts实例var myChart = echarts.init(document.getElementById('main'));var datas = document.getElementById('xAxis').value;var data2 = document.getElementById('series').value;var xAxis = datas.split(',');var series = data2.split(',');// 指定图表的配置项和数据var option = {title: {text: 'ECharts 入门示例'},tooltip: {},legend: {data:['销量']},xAxis: {// data:["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]data:xAxis},yAxis: {},series: [{name: '销量',type: 'bar',data: series}]};// 使用刚指定的配置项和数据显示图表。myChart.setOption(option);</script>
</body>
</html>

效果图：

nodejs + echarts 图表展示相关推荐

《数据分析-Echarts》Python + Django + echarts图表展示
Python + Django + echarts图表展示项目打包文件一.准备工作 ## 1.python环境安装 ## 2.python开发工具PyCharm安装二.创建Django项目三. ...
HTML按钮控制数据源 + echarts图表展示
HTML按钮控制数据源 + echarts图表展示时过匆匆,转眼见2018就剩下仅有的5天了,开心吗???2018的自己经历的许多许多,收获失败.痛苦快乐.酸甜苦辣都有.即将过去的12月特别的忙碌, ...
Vue中使用数据可视化Echarts图表展示
目录 Echarts--商业级数据图表 Echarts支持的图表 Echarts的使用方法 Echarts--商业级数据图表商业级数据图表,它是一个纯JavaScript的图标库,兼容绝大部分的浏览 ...
微信小程序之使用echarts图表展示OneNet温度数据（附小程序源码）2022-11-20
获取ECharts Apache ECharts 提供了多种安装方式,你可以根据项目的实际情况选择以下任意一种方式安装. 1.从 GitHub 获取 2.从 npm 获取 3.从 CDN 获取 4.在 ...
knockout+echarts实现图表展示
一.需要学习的知识 knockout, require, director, echarts, jquery.简单的入一下门,网上的资料很多,最直接就是进官网校习. 二.效果展示三.require的 ...
ASP.Net绑定Sql数据源用echarts图表来展示数据
ASP.Net绑定Sql数据源用echarts图表来展示数据这里我们需要先学会ajax请求和网页的echarts图的使用不会的同学也没关系可以看我接下来的内容我会一步步的来讲解的首先大家可以先从 ...
ECharts动态图表展示
1.首先简要的介绍一下Echarts: ECharts,缩写来自Enterprise Charts,商业级数据图表,一个纯javascript的图标库,兼容当前绝大多数浏览器,提供直观,生动,可交互, ...
java echarts 生成图片_java如何在后台生成echarts图表？实际代码展示
学习是一个永无止境的过程,关于java的学习更是如此.今天主要为大家介绍下,如何在java中后台生成echarts图表,并且为大家展示实际的操作流程. 首先说下它的适用情况:⑴.支持echart4.0 ...
Vue中echarts图表x轴文字倾斜展示(防止字迹展示重叠)
前言 Vue中echarts图表x轴文字倾斜展示效果图代码 axisLabel: {fontSize: 12,color: '#666',interval: 0,//主要是下面的代码-倾斜rota ...
大数据平台展示可视化效果，echarts图表实战项目(源码50套)
本文重点介绍HTML5图表框架echarts入门Demo及实战项目(含源码),以此来实现echarts大屏展示大数据平台可视化酷炫效果. 缘起:最近接了个任务需要用H5在前台两个大电视上做两页数据展示 ...

nodejs + echarts 图表展示

nodejs + echarts 图表展示相关推荐

最新文章

热门文章