美文网首页
小程序echarts

小程序echarts

作者: 岳小弟 | 来源:发表于2018-09-04 14:52 被阅读0次

    一、引入ec-canvas文件
    https://github.com/ecomfe/echarts-for-weixin
    “ec-canvas”
    二、配置json
    {
    "usingComponents":{
    "ec-canvas":"../../ec-canvas/ec-canvas"
    }
    }
    三、书写结构

    <view class="container log-list">
    <ec-canvas id="mychart-dom-line" canvas-id="mychart-line" ec="{{ec}}"></ec-canvas>
    </view>
    四、js文件
    //logs.js
    const util = require('../../utils/util.js')
    import * as echarts from '../../ec-canvas/echarts'
    const app = getApp()
    function initChart(canvas,width,height){
    const chart = echarts.init(canvas,null,{
    width:width,
    height:height
    })
    canvas.setChart(chart)
    var option = {
    color:["#37A2DA","#67E0E3","#9FE6B8"],
    legend:{
    data:["A","B","C"],
    top:20,
    left:"center",
    z:100
    },
    grid:{
    left:"3%",
    right:"4%",
    bottom:"3%",
    containLabel:true
    },
    xAxis:{
    type:"category",
    boundaryGap:false,
    data:["周一","周二","周三","周四","周五","周六","周日"]

    },
    yAxis:{
      x:"center",
      type:"value",
      splitLine:{
        lineStyle:{
          type:"solid"
        }
      }
    },
    series:[{
      name:'A',
      type:"line",
      smooth:true,
      data:[18,36,65,30,78,40,33]
    }, {
        name: 'B',
        type: "line",
        smooth: true,
        data: [12, 50, 51, 35, 70, 40, 33]
      }
      , {
        name: 'C',
        type: "line",
        smooth: true,
        data: [10, 30, 31, 50, 40, 20, 33]
      }]
    

    }
    chart.setOption(option)
    return chart
    }
    Page({
    onShareAppMessage:function(res){
    return{
    title:"Echarts",
    path:"/pages/index/index",
    success:function(){},
    fail:function(){}
    }
    },
    data: {
    ec:{
    onInit:initChart
    },
    logs: []
    },
    onReady(){},
    onLoad: function () {
    this.setData({
    logs: (wx.getStorageSync('logs') || []).map(log => {
    return util.formatTime(new Date(log))
    })
    })
    }
    })

    相关文章

      网友评论

          本文标题:小程序echarts

          本文链接:https://www.haomeiwen.com/subject/bjigwftx.html