eCharts 使用笔记

个人笔记本
这篇文章整理一下使用eCharts时的笔记。

首先！！！
一个入门的小例子：eCharts 快速入门实例

---

图表标题

option = {
    title: {
        text: '臭豆腐好不好吃啊',
        subtext: '还可以',
        bottom:0,        //标题位置,top ,left , bottom, right
        x:'center',      // 居中
        textStyle: {    //  设置标题样式
              fontWeight:'lighter',
              fontSize:16, 
              color: '#333'
           } ,    
         subtextStyle:{ //  设置子标题样式
              color: "#A6DEFD"
         },
    },
}

位置

调整图表在容器中的位置 grid

option = {
     grid: {
          left: '3%',
          right: '24%',   // top  ， bottom,
          containLabel: true
     },
}

提示框

option = {
   tooltip: {
       show:'true',
       //  默认：true；是否显示提示框组件，包括提示框浮层和 axisPointer。
       trigger: 'item',
       //  默认：item；触发类型。item：数据项图形触发，主要在散点图，饼图等无类目轴的图表中使用。
       //  'axis'：坐标轴触发，主要在柱状图，折线图等会使用类目轴的图表中使用。'none':什么都不触发。
       triggerOn: 'mousemove',  
       confine:true
   },
}

网格线

option = {
     yAxis: {
             type: 'value',
            splitLine: {   
               show: false   // 去掉 y 轴的网格线，x轴类似
            },
     }
}

数据动态显示

用setInterval每隔一段时间更新图表数据

// 生成数据的函数
function randomDataR2() {
      value = 200 + Math.random() * 20 - 10;
      return Math.round(value) ;
}
setInterval(function () {
    for (var i = 0; i < 1; i++) {
        dataR2.shift();
        dataR2.push(randomDataR2());
    }
    var timeX = echarts.format.formatTime('hh:mm:ss', new Date()) ;
    // 此处为更新 xAxis、series中的数据
    optionR2.xAxis.data.shift();
    optionR2.xAxis.data.push(timeX);
    optionR2.series[0].data = dataR2;
    myChart7.setOption(optionR2);
}, 1000); //  1000 毫秒 = 1秒  （每秒更新）

下图所示为每秒更新

---

❤ 更新中 ❤

option = {
❤ 
}