<script src="/assets/echart/echarts.js"></script>
<script src="/assets/echart/echarts.min.js"></script>
2. html页面添加
<div id ="line" style="width: 100%;height: 300px"></div>
3. Controller从数据库获取数据，返回json数据
@ResponseBody
@RequestMapping(value = "/echartWeight")
public List<Check> getEchartWeight() {
System.out.println("echartWeight");
List<Check> list = checkService.getMyChek("006524");
return list;
4.html编写ajax
<div id ="line" style="width: 100%;height: 300px"></div>
<script>
$(function () {
var myChart = echarts.init(document.getElementById('line'));
//数据加载完之前先显示一段简单的loading动画
// debugger;
myChart.showLoading({
text: '正在努力的读取数据中...', //loading话术
var names=[]; //横坐标数组（实际用来盛放X轴坐标值）
var values=[]; //纵坐标数组（实际用来盛放Y坐标值）
$.ajax({
url: "echartCheck",
method: "post",
dataType: "json",
success: function(result) {
//请求成功时执行该函数内容，result即为服务器返回的json对象
if (result) {
for(var i=0;i<result.length;i++){
names.push(result[i].checkDate);
values.push(result[i].checkReduce);
myChart.hideLoading(); //隐藏加载动画
myChart.setOption({ //加载数据图表
tooltip : {
trigger: 'axis'
legend: {
data:['体重减少值(kg)']
xAxis: {
type: 'category',
data: names,
yAxis: {
type: 'value',
axisLabel : {
formatter: '{value} kg'
series: [{
// 根据名字对应到相应的系列
data: values,
name: '体重减少值(kg)',
color:['#3399FF'], //折线条的颜色
type: 'line',
markPoint : {
data : [
{type : 'max', name: '最大值'},
{type : 'min', name: '最小值'}
error: function() {
alert("加载失败");
</script>
</body>
5. 运行效果：
6. 注意事项
（1）
legend中数据要和series中name的值保持一致，否则legend不显示
（2）最大值/最小值气泡显示
markPoint : {
data : [
{type : 'max', name: '最大值'},
{type : 'min', name: '最小值'}
]
},
（3）修改折线颜色
color:['#3399FF'], //折线条的颜色
1. 引入echart.js 和echar.min.js <script src="/assets/echart/echarts.js"></script> <script src="/assets/echart/echarts.min.js"></script>2. html页面添加 <div id ="li...
首先是后端：
主要用到的是
Echart
s的
折线图
，其中需要后端传过来的数据，就是横轴和纵轴的数据，在后端，我拿到了对象的List集合，新建了两个List用来存放横轴纵轴的数据，avgList是Y轴表示利用率，timeList是x轴表示时间，再放到Map中返回给前端
@ApiOperation("查询cpu分析数据列表")
@PostMapping("get
Echart
sList/{memoryId}")
public CommonResult get
Echart
sList( @PathVar
上篇文章我们用POI技术读取Excel并生成了相应的图表。但是实际的效果比较一般，因为本身WPS生成图表就比较简单，如果用程序操作远比人工耗时费力，效果远不如一些付费模板。如下图所示：
然后我就想到前端不是有一个简单易上手的
Echart
.js是专门做图表。所以就用它去做图表生成，后台数据解析还是用
springBoot
+Ajax+POI工具类。这样实现的效果就会好看和实用很多。来看一下效果图。
1、首先新建一个xls统计表。
2、数据填充
其中需要注意的是js依赖文件可以本地下载好引用本地。–适用于内
const { data } = this.props;
const chartDom = this.refs.chart;
const myChart =
echart
s.init(chartDom);
//
绘制
图表
myChart.setOption({
// 配置项
4. 配置图表
在 setOption 方法中，可以配置图表的各种属性，包括标题、坐标轴、数据系列等，代码如下：
```javascript
myChart.setOption({
title: {
text: '柱状
折线图
示例'
legend: {
data: ['销量', '利润']
tooltip: {},
xAxis: {
data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
yAxis: [
type: 'value',
name: '销量（件）'
type: 'value',
name: '利润（元）'
series: [
name: '销量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
name: '利润',
type: 'line',
yAxisIndex: 1,
data: [10, 30, 50, 20, 20, 30]
以上代码配置了一个
带
有标题、图例、提示框、两个坐标轴、柱状系列和
折线
系列的柱状
折线图
。
5. 渲染图表
最后，在 render 方法中，渲染一个 div 容器，并通过 ref 属性指定其引用，代码如下：
```javascript
render() {
return (
<div ref="chart" style={{ width: '100%', height: '400px' }}></div>
这样，就可以在 React 中使用
EChart
s
绘制
柱状
折线图
了。
