小程序echarts

2018-09-04  本文已影响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))
})
})
}
})

上一篇下一篇

猜你喜欢

热点阅读