ECharts学习笔记

简介: ECharts学习笔记

最近有个项目是做图标展示的,现在流行的插件一般有Highcharts,ECharts。考虑到ECharts是开源的,又是百度的产品,就选择了它。

首先下载echarts的包,地址http://echarts.baidu.com/index.html。然后把echarts.min.js加到项目中。

页面上建一个div,如:

<div id="chart1"></div>

设置它的样式:

height: 340px;

然后编写js:

//第一个图表
var container = document.getElementById('chart1');
// 基于准备好的dom,初始化echarts实例
chart1 = echarts.init(container);
var incount = data.series.incount;
var outcount = data.series.outcount;
var date = data.date;
option = {
  title : {
    text : '各时段进出人次',
    x : 'center',
    textStyle : {
      fontSize : 24,
      fontWeight : 'normal',
      color : '#23FFBB'
    }
  },
  tooltip : {
    showDelay: 0,
    hideDelay: 0,
    transitionDuration:0,
    padding: 15,
    position : function(p) {
      return [p[0] + 10, p[1] - 10];
    },
    formatter:'{b} 点<br/>{a}:{c0}'//<br/>{a1}:{c1}<br/>{a2}:{c2}
  },
  toolbox: {  
    show: true,
    x: 'left',
    feature: {  
      magicType: {show: true, type: ['line', 'bar']},  
      restore: {show: true},  
      saveAsImage: {show: true}  
    }  
  },
  legend: {
    show: true,
    x : 'center',
    y : 'bottom',
    itemGap : 20,
    data : [{
      name : '进', 
      textStyle : {
        fontSize : 14,
        color : '#99CCCC'
      }
    },{
      name : '出',
      textStyle : {
        fontSize : 14,
        color : '#99CCCC'
      }
    }],
    selected: {  
      '进': true,  
      '出': true
    },
    itemWidth: 20,             // 图例图形宽度
    itemHeight: 20            // 图例图形高度
  },
  xAxis : {
    type : 'category',
    axisLine : {
      lineStyle : {
        width: 2,
        color : '#99CCCC'
      }
    },
    axisLabel : {
      formatter : '{value} 点'
    },
    boundaryGap : false,
    data : date
  },
  yAxis : [ {
    show : true,
    type : 'value',
    axisLine : {
      lineStyle : {
        width: 2,
        color : '#99CCCC'
      }
    },
    splitLine : {
      show : false
    },
    axisLabel : {
      formatter : '{value} 人'
    }
  } ],
  series : [{
    name : '进',
    type : 'line',
    barWidth : 25,//固定柱子宽度
    symbol : 'none',
    data : incount,
    itemStyle : {
      normal : {
        color : '#23FFBB',
        lineStyle: {        // 系列级个性化折线样式
          width: 2
        },
        label : {
          show : true,
          position : 'top',
          textStyle : {
            fontSize : '15'
          }
        }
      }
    }
  },{
    name : '出',
    type : 'line',
    barWidth : 25,//固定柱子宽度
    symbol : 'none',
    data : outcount,
    itemStyle : {
      normal : {
        color : '#FFD54E',
        lineStyle: {        // 系列级个性化折线样式
          width: 2
        },
        label : {
          show : true,
          position : 'top',
          textStyle : {
            fontSize : '15'
          }
        }
      }
    }
  }]
};
chart1.setOption(option);

得到如下图


上面是一个线形图,我们再编写一个柱状图:

//第二个图表
var container = document.getElementById('chart1');
// 基于准备好的dom,初始化echarts实例
chart1 = echarts.init(container);
option = {
  title : {
    text : '当天借还量',
    x : 'center',
    textStyle : {
      fontSize : 24,
      fontWeight : 'normal',
      color : '#23FFBB'
    }
  },
  tooltip : {
    //trigger: 'axis',
    showDelay: 0,
    hideDelay: 0,
    transitionDuration:0,
    padding: 15,
    position : function(p) {
      return [p[0] + 10, p[1] - 10];
    },
    formatter:'{b} 点<br/>{a}:{c0}'//<br/>{a1}:{c1}<br/>{a2}:{c2}
  },
  toolbox: {
    show : true,
    x: 'left',                // 水平安放位置,默认为全图右对齐,可选为:
    feature : {
      magicType : {show: true, type: ['line', 'bar']},//, 'stack', 'tiled'
      restore : {show: true},
      saveAsImage : {show: true}
    }
  },
  legend: {
    show: true,
    x : 'center',
    y : 'bottom',
    itemGap : 20,
    data : [{
      name : '借', 
      textStyle : {
        fontSize : 14,
        color : '#99CCCC'
      }
    },{
      name : '还',
      textStyle : {
        fontSize : 14,
        color : '#99CCCC'
      }
    },{
      name : '续借',
      textStyle : {
        fontSize : 14,
        color : '#99CCCC'
      }
    }],
    selected: {  
      '借': true,  
      '还': true,
      '续借': true
    },
    backgroundColor: 'rgba(0,0,0,0)',//背景透明
    borderWidth: 0,
    padding: 2,                // 图例内边距,单位px,默认各方向内边距为5,
    itemWidth: 20,             // 图例图形宽度
    itemHeight: 20            // 图例图形高度
  },
  xAxis : {                //x轴
    axisLine : {
      lineStyle : {
        width: 2,
        color : '#99CCCC'
      }
    },
    axisLabel : {
      formatter : '{value} 点'
    },
    data : data.date
  },
  yAxis : [{             //y轴
    type : 'value',
    axisLine : {
      lineStyle : {
        width: 2,
        color : '#99CCCC'
      }
    },
    splitLine : {
      show : false
    },
    axisLabel : {
      formatter : '{value} 本'
    }
  }],
  series : [{
    name: '借',
    type : 'bar',
    barWidth : 20,//固定柱子宽度
    data : data.type1_total,
    itemStyle : {
      normal : {
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1,[{offset: 0, color: '#37CFFC'},{offset: 1, color: '#3784D9'}]),
        label : {
          show : true,
          position : 'top',
          textStyle : {
            fontSize : '15'
          }
        }
      }
    }
  },{
    name: '还',
    type : 'bar',
    barWidth : 20,//固定柱子宽度
    data : data.type2_total,
    itemStyle : {
      normal : {
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1,[{offset: 0, color: '#9DFFAA'},{offset: 1, color: '#19FFBD'}]),
        label : {
          show : true,
          position : 'top',
          textStyle : {
            fontSize : '15'
          }
        }
      }
    }
  },{
    name: '续借',
    type : 'bar',
    barWidth : 20,//固定柱子宽度
    data : data.type3_total,
    itemStyle : {
      normal : {
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1,[{offset: 0, color: '#FFEDB3'},{offset: 1, color: '#FFD54E'}]),
        label : {
          show : true,
          position : 'top',
          textStyle : {
            fontSize : '15'
          }
        }
      }
    }
  }]
};
// 使用刚指定的配置项和数据显示图表。
chart1.setOption(option);


上面的series中的itemStyle的color采用的是渐变色。

得到下图:



随浏览器大小变化,加上下面代码即可:

$(window).resize(function() {
  if(chart1)setTimeout(chart1.resize, 1);
});

也可以写成:

windows.οnresize=chart1.resize;


数据都是从后台读取出来的,大家可以使用ajax的方式来实现。

网上还有很多其他案例,大家可以参照着学习。

官方的开发文档:http://echarts.baidu.com/echarts2/doc/doc.html

样例展示:http://echarts.baidu.com/echarts2/doc/example.html


相关文章
|
3月前
|
Web App开发 数据可视化 前端开发
Echart的使用初体验,Echarts的基本使用及语法格式,简单图表绘制和使用及图例添加【学习笔记】
本文介绍了ECharts的基本使用和语法格式,包括如何引入ECharts、创建容器、初始化echarts实例对象、配置option参数和一些基础图表的绘制方法。文章还提供了简单图表绘制和使用图例添加的示例代码,以及对ECharts特性和优势的概述。
Echart的使用初体验,Echarts的基本使用及语法格式,简单图表绘制和使用及图例添加【学习笔记】
|
SQL 监控 JavaScript
网站流量日志分析--数据可视化 -- echarts 简单入门 | 学习笔记
快速学习网站流量日志分析--数据可视化 -- echarts 简单入门
|
数据可视化 JavaScript 前端开发
Echarts 简介 | 学习笔记
快速学习 Echarts 简介
|
2月前
|
小程序 前端开发 JavaScript
微信小程序图表制作利器:ECharts组件的使用与技巧
微信小程序图表制作利器:ECharts组件的使用与技巧
70 1
|
2月前
|
JavaScript
vue中使用echarts绘制双Y轴图表时,刻度没有对齐的两种解决方法
vue中使用echarts绘制双Y轴图表时,刻度没有对齐的两种解决方法
370 0
|
4月前
|
小程序 JavaScript
微信小程序使用echarts图表(ec-canvas)
这篇文章介绍了在微信小程序中使用`ec-canvas`集成echarts图表的方法,包括解决加载时报错的问题、配置图表组件、以及在小程序页面中引入和使用这些图表组件的步骤。
515 1
微信小程序使用echarts图表(ec-canvas)
|
4月前
|
前端开发 数据可视化 JavaScript
Echarts如何实现多图表缩放和自适应?附源码
Echarts如何实现多图表缩放和自适应?附源码
Echarts如何实现多图表缩放和自适应?附源码
|
4月前
Echarts——如何默认选中图表并显示tooltip
Echarts——如何默认选中图表并显示tooltip
74 1
|
4月前
|
XML SQL JavaScript
在vue页面引入echarts,图表的数据来自数据库 springboot+mybatis+vue+elementui+echarts实现图表的制作
这篇文章介绍了如何在Vue页面中结合SpringBoot、MyBatis、ElementUI和ECharts,实现从数据库获取数据并展示为图表的过程,包括前端和后端的代码实现以及遇到的问题和解决方法。
在vue页面引入echarts,图表的数据来自数据库 springboot+mybatis+vue+elementui+echarts实现图表的制作
|
4月前
|
JavaScript
Echarts——VUE中非根节点时不显示图表也无报错
Echarts——VUE中非根节点时不显示图表也无报错
41 1