微信小程序echars

上班闲来无事,写点东西吧

如果写完发现小程序echars在安卓上字体显示超级小那么好的朋友点击此处查看解决

//echars x轴  type的几种类型,官网扣的
'value' 数值轴，适用于连续数据。
'category' 类目轴，适用于离散的类目数据，为该类型时必须通过 data 设置类目数据。
'time' 时间轴，适用于连续的时序数据，与数值轴相比时间轴带有时间的格式化，在刻度计算上也有所不同，例如会根据跨度的范围来决定使用月，星期，日还是小时范围的刻度。
'log' 对数轴。适用于对数数据。

value和category的区别我查了下
	就是value必须把数据写到series.data中
	而 category 则可以在他处定义只写 参数名就可以,而不是列表

双折线无y轴的echars折线图

//微信小程序很坑

//1. 首先在需要展现的页面带入
import * as echarts from '../../../ec-canvas/echarts';
//多新鲜
//2.定义个空的echars收容所(几个echars需要定义几个)
let chart = null;
//3. 在wxss页面上放一下
 <ec-canvas canvas-id="mychart-bar" ec="{{ ec }}"></ec-canvas>
 //4.在回到我们的js文件
 page-->data
   data: {
    ec: {
      onInit: function (canvas, width, height) {
        chart = echarts.init(canvas, null, {
          width: width,
          height: height
        });
        canvas.setChart(chart);
      },
    },
 }
//注意名字配套问题
//5.完成我们想要的echars图样式
page-->onLoad

    getDeviceDetail_echears(options.id, options.type, (result) => {
      var option = {
        tooltip: {
          trigger: 'axis',
          show: true,
          axisPointer: {            // 坐标轴指示器，坐标轴触发有效
            type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        grid: {    //图的位置显示不全,调他
          left: '-1%',
          right: '5%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: { 
          type: "time",    //详情上边有
          axisTick: {
            alignWithLabel: true,
            show: true
          },
          splitLine: {
            show: false
          }
        },
        tooltip: {
            trigger: 'axis'
        },
        yAxis: {  //这个是y轴无任何东西的,需要添加的改下边 把关于show的删了
          x: 'center',
          type: 'value',

          axisLabel: {
          },
          axisLine: {
            show: true
          },
          axisTick: {
            show: false
          },
          splitLine: {
            show: false,
            lineStyle: {
              type: 'dashed'
            },
          },
          show: false
        },
        series: [{
          name: '温度',
          type: 'line',   //类型  bar 啥的
          smooth: true,
          showSymbol: false,
          data: DataWeek_tem, //数据内容
          itemStyle: { color: "#32A8FF" }, 
          areaStyle: {  //渐变色 秀不秀 
            normal: {   
              color: new echarts.graphic.LinearGradient(0, 0, 0, 0.7, [{
                offset: 0,
                color: 'rgb(50, 168, 255)'
              }, {
                offset: 0.7,
                color: 'rgb(255, 255, 255)'
              }])
            }
          }
        }, {
          name: '湿度',
          type: 'line',
          smooth: true,
          showSymbol: false,
          data: DataWeek_hum,
          itemStyle: { normal: { color: "#45DCC6" } },
          areaStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 0.7, [{
                offset: 0,
                color: 'rgb(130,255,245)'
              }, {
                offset: 0.7,
                color: 'rgb(255, 255, 255)'
              }])
            }
          }
        }]
      };
      chart.setOption(option);    //这里就用到我们之前定义的内容了,注意参数名
      return chart;   //这里返回就大功告成了
    })

12.25更新下,以前写的有点问题,放在onload里面手机慢第一次加载会报错

//放在 page上边
const initChart = function (canvas, width, height) {
  const chart = echarts.init(canvas, null, {
    width: width,
    height: height
  })
  canvas.setChart(chart)
  var curPages = getCurrentPages();
  let that = curPages[curPages.length - 1]
  let sn = that.data.device_id
  let pid = sn.substr(5, 3)
  getDeviceDetail_echears(sn, pid, (result) => {
    let DataWeek_tem = []
    let DataWeek_hum = []
    for (var i = 0; i < result.data.length; ++i) {
      DataWeek_tem.push([result.data[i].create_time * 1000, result.data[i].temperature / 10])
      DataWeek_hum.push([result.data[i].create_time * 1000, result.data[i].humidity / 10])
    }
    let option = {
     
      legend: {
        data: ['温度', '湿度'],
        x: 'left'
      },
      grid: {
        left: '7%',
        right: '7%',
        bottom: '3%',
        containLabel: true
      },

      xAxis: {
        type: 'time',
        max: () => {
          return gettime()
        },
        min: () => {
          return (gettime() - (24 * 3600 * 1000 * 7))
        },
        maxInterval: 3600 * 24 * 1000,

        axisLabel: {
          // 安卓字体小  
          fontSize: '13', //解决方法,只能使用13,其他不行
          formatter: (value, index) => {
            if (index == 7) {
              return '今天'
            } else {
              let dateTime = new Date(value)
              return getWeek(dateTime.getDay())
            }
          },
        },
        axisTick: {
          show: true,
          alignWithLabel:{
            boundaryGap :true
          }
        },
        axisLine: {
          lineStyle: {
            color: '#ccc'
          }
        },
        splitLine: {
          show: false,
        }
      },
      tooltip: {
        trigger: 'axis'
      },
      yAxis: [
        {
          splitLine: {show: false},
          type: 'value',
          name: "温\n度\n︵\n℃\n︶",  //y轴name名,
          nameLocation: "center",   //name名位置
          min: -40,
          max: 80,
          axisPointer: {
              label: {
                  formatter: '温度:{value}℃'
  
              }
          },
          axisLine: {
              lineStyle: {
                  color: '#ccc',
                  width: 2,//这里是为了突出显示加上的
              }
          },
          // splitNumber: 12,
          nameGap: 35,   //name名配置
          nameRotate: 0,
          nameTextStyle: {
              fontSize: 12,
          },
   
  
      }, {
        splitLine: {show: false},
        type: 'value',
        name: "湿\n度\n︵\n%\n︶",
        nameLocation: "center",
        min: 0,
        max: 120,
        // splitNumber: 10,
        axisPointer: {
            label: {
                formatter: '湿度{value}％'

            }
        },
        axisLine: {
            lineStyle: {
                color: '#ccc',
                width: 2,//这里是为了突出显示加上的
            }
        },
        nameGap: 35,
        nameRotate: 0,
        nameTextStyle: {
            fontSize: 12,
        },

    }
      ],
      series: [{
        label: {
          normal: {
            show: true,
            rich: {}
          }
        },
        name: '温度',
        type: 'line',
        smooth: true,
        showSymbol: false,
        data: DataWeek_tem,
        itemStyle: { color: "#32A8FF" },
        areaStyle: {  
          normal: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 0.7, [{
              offset: 0,
              color: 'rgb(50, 168, 255)'
            }, {
              offset: 0.7,
              color: 'rgb(255, 255, 255)'
            }])
          }
        }
      }, {
        name: '湿度',
        type: 'line',
        smooth: true,
        showSymbol: false,
        data: DataWeek_hum,
        itemStyle: { normal: { color: "#45DCC6" } },
        areaStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 0.7, [{
              offset: 0,
              color: 'rgb(130,255,245)'
            }, {
              offset: 0.7,
              color: 'rgb(255, 255, 255)'
            }])
          }
        }
      }]
    };
    chart.setOption(option)
  })
}

更新完毕两个双y轴折线图,样式不是很一样