ECharts实现数据可视化

ECharts介绍

• 是一个JS插件
• 性能好可流畅运行PC与移动设备
• 兼容主流浏览器
• 提供很多常用图表【折线图、柱状图、散点图、饼图、K线图】，且可定制（支持自定义）

echarts使用

• ECharts安装

• 下载 echart的文件夹 创建一个html文件

• 用< script >标签导入echarts.min.js

  <script src="./js/echarts.min.js"></script>
  

• 初始化：var echart = echarts.init(dom节点,主题)

• 定义选项： var option = {}

• 更新选项：echart.setOption(option)

含义和运用

• title标题
  • text文本
  • left左对齐，center中间，right右对齐
• legend
  • data:[图例] 图例和seriesname保持一致
• tooltip 提示框组件
  • trigger触发条件
  • item元素,axis轴线 xAxis x轴 yAxis y轴
• series系列数据 每个系列通过 type 决定自己的图表类型
  • bar条状图；
  • line线型图；
  • pie饼状图;
• stack：数据堆叠，同个类目轴上系列配置相同的stack值后 后一个系列的值会在前一个系列的值上相加。
• color：调色盘颜色列表

特殊样式

• 定义渐变

var linear = {
                   type: 'linear',
                  x: 0,
                   y: 0,
                   x2: 0,
                   y2:1,
                   colorStops: [{
                           offset: 0, color: '#02bcff' // 0% 处的颜色
 
                   }, {
                           offset: 1, color: '#5555ff' // 100% 处的颜色
 
                   }],
                   global: false // 缺省为 false
                 }

• 使用渐变

itenStyle:{
color:linear,//渐变颜色
}

事件监听

echart.on(事件名，处理函数)
echart.on("mouseover",e=>{})