写在前面:

最近项目中用到了Echarts做趋势图,博主通过万能的度娘研究了一下。Echarts字段的使用基本都写在代码注释里了,这是博主的第一篇博客,如果哪里写的不好望大家见谅,最后希望本篇博客对大家有一些帮助。

1.下载Echarts.js包

使用Echarts需要先下载Echarts.js包,大家可以从Echarts官网下载,

或者可以从博主提供的网址下载:echarts.min.js

把链接中的js代码全部复制到一个空txt文件,保存之后重命名为echarts.min.js即可。

2.Echarts.js导入程序

就是直接把下载完成的js包粘贴到项目的js文件夹下

3.将Echarts.js引入使用的网面

<script src="js/echarts.min.js" charset="utf-8" type="text/javascript"></script>

4.下面是曲线图案例

效果图:



代码:

html:

<div class="border-div" id="border-div">
<div class="Echarts" id="trendChart"></div>
</div>

css:

<style type="text/css">
#border-div {
width: 700px;
height: 430px;
border: 1px solid #000000;
margin: 10% auto;
overflow:visible
}
#trendChart {
width: 700px;
height: 400px;
margin-top: 3%
}
</style>

js:

<script language="JavaScript" type="text/javascript">
// 页面初始化
window.onload = function(){
// 获取异常振动加速度统计数据
myChart();
}; //Echarts
function myChart() {
var alarmTime = "2020-08-14 14:56:31";
var option = {
title: {
text: '车体振动及转向架振动',
// left: 'left', // 可选为:'left' | 'center' | 'right'
padding: [0,0,0,20], // 上, 右, 下, 左
/* textStyle: {
fontWeight: 'normal',
color: 'MidnightBlue' // 标题颜色
} */
},
/* 提示框组件 */
tooltip: {
trigger: 'axis', // 触发类型,在饼形图中为item
axisPointer : { // 坐标轴指示器,坐标轴触发有效
type : 'line' // 默认为直线,可选为:'line' | 'shadow'
},
formatter: function (params, ticket, callback) { // 用formatter回调函数显示多项数据内容
var htmlStr = '';
for(var i=0;i<params.length;i++){
var param = params[i];
var xName = param.name; // x轴的名称
var seriesName = param.seriesName; // 图例名称
var value = param.value; // y轴值
var color = param.color; // 图例颜色 if(i===0){
htmlStr += xName + '<br/>';//x轴的名称
}
htmlStr +='<div>';
//为了保证和原来的效果一样,这里自己实现了一个点的效果
htmlStr += '<span style="margin-right:5px;display:inline-block;width:10px;height:10px;border-radius:5px;background-color:'+color+';"></span>'; // 文本颜色设置--(需要设置,请解注释下面一行)
// htmlStr += '<span style="color:'+color+'">'; // 圆点后面显示的文本
htmlStr += seriesName + ':' + value + '&nbsp&nbsp&nbsp' + alarmTime; // 文本颜色设置--(需要设置,请解注释下面一行)
// htmlStr += '</span>'; htmlStr += '</div>';
}
return htmlStr;
} },
color: ['HotPink','DeepSkyBlue','LawnGreen','Gold'], // 图例及线条的颜色
/* 设置图例样式 */
legend: {
left: 'right', // 位置
padding: [3,60,0,0],
icon: "circle", // 形状 类型包括 circle,rect,line,roundRect,triangle,diamond,pin,arrow,none
itemWidth: 10, // 设置宽度
itemHeight: 10, // 设置高度
itemGap: 12, // 设置间距
data: ['车体振动I位 ', '车体振动II位', '转向架振动I位', '转向架振动II位'],
textStyle:{ // 设置图例字体
color: '#000000',
// fontSize: "15"
}
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
/*下载功能*/
toolbox: {
feature: {
saveAsImage: {}
},
padding: [0,15,0,0]
},
xAxis: {
type: 'category',
boundaryGap: false,
/* axisLine: { // 改变x轴颜色 默认不写为黑色
lineStyle: {
color: '#00FFFF',
width: 1 // 这里是为了突出显示加上的
}
}, */
data: [ '0s','1s', '2s', '3s', '4s', '5s', '6s', '7s', '8s', '9s']
},
yAxis: {
/* axisLine: { // 改变y轴颜色 默认不写为黑色
lineStyle: {
color: '#00FFFF',
width: 1 // 这里是为了突出显示加上的
}
}, */
type: 'value'
},
series: [
{
name: '车体振动I位 ',
type: 'line',
// stack: '加速度',
smooth: true,
/*lineStyle: {//折线颜色
normal: {
color: '#00FFFF',
width: 2
}
},*/
data: ["-1.02", "-0.84", "-2.66", "-1.23", "0.94", "-0.27", "-0.65", "-3.3", "-0.56", "-1.14"]
// data: data.ctzd1
},
{
name: '车体振动II位',
type: 'line',
// stack: '加速度',
smooth: true,
/*lineStyle: { // 折线颜色
normal: {
color: '#00FFFF',
width: 2
}
},*/
data: ["-2.57", "3.43", "-1.16", "-0.55", "-0.52", "0.6", "0.13", "0.2", "1.38", "0.17"]
// data: data.ctzd2
},
{
name: '转向架振动I位',
type: 'line',
// stack: '加速度',
smooth: true,
/*lineStyle: { // 折线颜色
normal: {
color: '#00FFFF',
width: 2
}
},*/
data: ["-0.39", "-1.08", "-0.15", "-0.31", "-1.98", "-0.42", "-0.14", "-1.55", "-0.27", "0.29"]
// data: data.zxjzd1
},
{
name: '转向架振动II位',
type: 'line',
// stack: '加速度',
smooth: true,
/*lineStyle: { // 折线颜色
normal: {
color: '#00FFFF',
width: 2
}
},*/
data: ["-0.2", "-0.35", "-0.19", "-0.95", "-0.46", "-0.32", "-0.04", "-0.38", "-0.91", "0"]
// data: data.zxjzd2
}
]
}; var chart = echarts.init(document.getElementById('trendChart'));
// 使用刚指定的配置项和数据显示图表。
chart.setOption(option);
}
</script>

5.若要传递真实数据可以使用ajax来实现前后端数据交互

代码如下:

引入jquery

发送ajax请求

java后端:

controller

service

Echarts的食用方式的更多相关文章

  1. 在ANGULAR6中使用Echarts的正确方式之一

    这里的正确指的是不会在运行过程中报错,不会再prod模式下编译报错,不会再AOT模式下编译报错 个人环境说明: { "name": "angular-for-echart ...

  2. Hexo之我的桌角女友的食用方式

    秀秀 通过使用一个名为 hexo-helper-live2d 的开源库,可以轻松的在自己的Hexo网站下贴上一只生猛可爱的萌妹子或主子: 什么是live2d Live2d是11区宅男们开发出的虚拟女友 ...

  3. JFreeChart与AJAX+JSON+ECharts两种处理方式生成热词统计可视化图表

    本篇的思想:对HDFS获取的数据进行两种不同的可视化图表处理方式.第一种JFreeChar可视化处理生成图片文件查看.第二种AJAX+JSON+ECharts实现可视化图表,并呈现于浏览器上.   对 ...

  4. 若依项目整合eCharts实现图表统计功能

    eCharts是一款强大的图表统计工具,具体介绍可查看其官网 http://echarts.baidu.com/echarts2/index.html 下面记录一下如何在若依项目中使用eCharts. ...

  5. echarts的一点记录

    echart官网地址: https://www.echartsjs.com/index.html echarts实例地址:https://echarts.baidu.com/examples/ vue ...

  6. Qt+ECharts开发笔记(三):ECharts的柱状图介绍、基础使用和Qt封装Demo

    前言   上一篇成功是EChart随着Qt窗口变化而变化,本篇将开始正式介绍柱状图介绍.基础使用,并将其封装一层Qt.  本篇的demo实现了隐藏js代码的方式,实现了一个条形图的基本交互方式,即Qt ...

  7. 双11不再孤单,结识ECharts---强大的常用图表库

    又是一年双十一,广大单身狗们有没有很寂寞(好把,其实我也是)!但是这次的双十一,我不再孤单,因为结识了一个js的强大的图表库---ECharts. 最近做软件工程项目的时候,由于设计图中有柱状图和饼图 ...

  8. canvas图表(1) - 柱状图

    原文地址:canvas图表(1) - 柱状图 前几天用到了图表库,其中百度的ECharts,感觉做得最好,看它默认用的是canva,canvas图表在处理大数据方面比svg要好.那我也用canvas来 ...

  9. 五道java小题,补更四道java小题

    一:分析以下需求,并用代码实现     1.定义List集合,存入多个字符串     2.删除集合中字符串"def"     3.然后利用迭代器遍历集合元素并输出 import j ...

随机推荐

  1. 【java从入门到精通】day08-java流程控制-用户交互Scanner--顺序结构--选择结构

    1.java流程控制 Scanner对象: Java提供了一个工具类,可以获取用户的输入 java.until.Scanner是Java5的新特征,我们可以通过Scanner类来获取用户的输入 基本语 ...

  2. Debian 64位内核升级步骤

    安装相关依赖包 apt-get install bzip2 libncurses5-dev kernel-package zlib1g-dev gcc make kernel-package wget ...

  3. javaScript高级程序设计.pdf && 你不知道的JavaScript

    转: JavaScript高级程序设计 链接:https://pan.baidu.com/s/1iRQ8FjpJqutZJzgdJ8ZBKA 提取码:ndnp 你不知道的JavaScript 链接:h ...

  4. 学会网页制作,web app开发,必须先从语法基础开始学习

    做软件开发,是从事编程开发工作,必须先从语法基础开始学习,通过语法组成产品效果.      前端开发的基础语法,由HTML+CSS+JavaScript组成,这是前端开发最基本的3个语言.       ...

  5. docker搭建渗透环境并进行渗透测试

    目录 docker简介 docker的安装 docker.centos7.windows10(博主宿主机系统)之间相互通信 -docker容器中下载weblogic12c(可以略过不看) docker ...

  6. tp5 生成随机数

    控制器调用 public function GetRanStr(){ if (request()->isPost()) { //生成6位数随机数 return GetRandStr(6); } ...

  7. 理解Volatile关键字,其实看这一篇就够了,写的非常细致

    前言 volatile是Java虚拟机提供的轻量级的同步机制. volatile关键字作用是什么? 两个作用: 1.保证被volatile修饰的共享变量对所有线程总数可见的,也就是当一个线程修改了一个 ...

  8. 看看吧!月薪20K以上的程序员才能全部掌握RabbitMq知识,你掌握了多少

    一.RabbitMq基础知识 0.概述 消息队列的作用就是接收消息生产者的消息,然后将消息发送到消费者 1.信道channel 我的理解是生产者/消费者和rabbitmq交互的一个通道,负责交换机.队 ...

  9. FL Studio中的Layer控制器之如何叠加音色

    本章节将采用图文结合的方式给大家讲解电音编曲软件FL Studio中的Layer控制器是如何叠加音色的,感兴趣的朋友可以一起进来交流哦. Layer控制器也是FL Studio中一个特别有用的插件,主 ...

  10. FL Studio中有关Sub Bass的一些制作与混音技巧

    1.Sub Bass是什么? Sub Bass是一种低沉的低音,其频率大约低于60赫兹,并向下延伸,包括人类所能听到的最低频率,约为20赫兹.在这个范围内,人类的听觉不是很灵敏,所以在这个范围内的声音 ...