echarts title位置_微信小程序引入 Echarts ( 数据图表 )

Echarts——我们来了！！！

微信小程序引入 echarts ( 数据图表 )；

talk is cheap , show me the code

---

---

环境准备：

    微信开发者工具等相关开发环境已准备好；

第一步：

    下载官方提供的小程序版 ECharts echarts-for-weixin 

第二步：

   2.1： 将下载好的echarts-for-weixin 文件解压；

   2.2：将解压后的ec-canvas文件放在项目文件夹下(或根目录下——随意)；

   2.3：打开微信开发者工具，并新建项目；(此处新建项目webtwo)；

   2.4：打开webtwo项目，新建page文件夹，在page文件夹下新建line文件夹，然后鼠标右键选中line文件夹，选择新建Conponent，填入index；此时微信的index页面就创建好了；

如图显示：

    仅供参考：

ok !     至此都已准备结束，开始编写代码

第三步：

    3.1：

        line文件夹下四个文件：wxml，wxss，json，js

    wxml：

        我们给页面添加一个组件：(如下)

<view class="container">

  <ec-canvas id="mychart-dom-line" canvas-id="mychart-line" ec="{{ ec }}">ec-canvas>

view>

    wxss：

/**index.wxss**/

page{

  background-color: #dbeef5;

}

ec-canvas {

  width: 100%;

  height: 100%;

}

page：给页面设置背景色

ec-canvas：设置图表显示的宽度和高度

    json：

{

  "usingComponents": {

    "ec-canvas": "../../ec-canvas/ec-canvas"

  }

}

因为新建的页面中，json内为空——如下：

{

  "usingComponents": {

  }

}

因此，我们需要在此添加 "ec-canvas": "../../ec-canvas/ec-canvas"

这一配置的作用是，允许我们在 pages/line/index.wxml 中使用  组件

如果你的目录结构与我相同，可以使用../../ec-canvas/ec-canvas；要根据实际目录结构来哟；

    js：

import * as echarts from '../../ec-canvas/echarts';//引用小程序组件

const app = getApp();

function initChart(canvas, width, height, dpr) {

  const chart = echarts.init(canvas, null, {

    width: width,

    height: height,

    devicePixelRatio: dpr // new

  });

  canvas.setChart(chart);

  var option = {

    title: {

      text: '要 努 力 啊 ， 少 年 ！',

      left: 'center'

    },

    color: ["#4876FF", "#32CD32", "#DC143C"],

    legend: {

      data: ['人际', '勤奋', '潜力'],

      top: 30,

      left: '30%',

      backgroundColor: '#E0FFFF',

      z: 100

    },

    grid: {

      containLabel: true,

      borderColor:'#7FFFD4'

    },

    tooltip: {

      show: true,

      trigger: 'axis'

    },

    xAxis: {

      name:'年龄',

      type: 'category',

      boundaryGap: false,

      nameTextStyle:{

        padding:[0,0,0,-10]

      },

      nameLocation:'end',//坐标轴名称显示位置。

      axisLabel : {//坐标轴刻度标签的相关设置。

        interval:0,

        rotate:"0"

    },

      data: ['25', '30', '35', '40', '45', '50'],

      // show: false

    },

    yAxis: {

      name:'经验值',

      x: 'center',

      type: 'value',

      splitLine: {

        lineStyle: {

          type: 'dashed'

        }

      }

      // show: false

    },

    series: [{

      name: '人际',

      type: 'line',

      smooth: true,

      data: [35, 50, 70, 85, 90, 80]

    }, {

      name: '勤奋',

      type: 'line',

      smooth: true,

      data: [40, 55, 60, 70, 65, 60]

    }, {

      name: '潜力',

      type: 'line',

      smooth: true,

      data: [50, 68, 80, 85, 75, 68]

    }]

  };

  chart.setOption(option);

  return chart;

}

Page({

  onShareAppMessage: function (res) {

    return {

      title: 'ECharts 可以在微信小程序中使用啦！',

      path: '/pages/index/index',

      success: function () { },

      fail: function () { }

    }

  },

  data: {

    ec: {

      onInit: initChart

    }

  },

  onReady() {

  }

});

此处js代码源码贴上

感兴趣的朋友可以参考：

https://echarts.apache.org/zh/tutorial.html#%E5%9C%A8%E5%BE%AE%E4%BF%A1%E5%B0%8F%E7%A8%8B%E5%BA%8F%E4%B8%AD%E4%BD%BF%E7%94%A8%20ECharts

效果如下：

---