微信小程序中使用Echarts（折线图）_微信小程序折线图

一、微信中使用 Echars
直接在官网小程序使用Echarts中（文档-教程-在微信中使用Echarts），找到GitHub上的DEMO下载链接，官网有详细的使用步骤
官网：http://echarts.baidu.com/

github：https://github.com/ecomfe/echarts-for-weixin

首先，在 pages/index目录下新建以下几个文件：index.js、 index.json、 index.wxml、 index.wxss。并且在 app.json 的 pages 中增加 'pages/index/index'。

index.json：

{
  "navigationBarTitleText": "图表A",
  "enablePullDownRefresh": true,
  "usingComponents": {
    "ec-canvas": "../../ec-canvas/ec-canvas"
  }
}

index.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 = {
    title: {
      // text: '数据统计',
      left: 'center'
    },
    color: ["#37A2DA"],
    legend: {
      data: ['A','B'],
      top: 20,
      left: 'center',
      backgroundColor: '#dbdbdb',
      z: 100
    },
    grid: {
        left: 0,//折线图距离左边距
        right: 50,//折线图距离右边距
        top: 30,//折线图距离上边距
        bottom: 10,
        containLabel: true
    },
    tooltip: {
      show: true,
      trigger: 'axis'
    },
    xAxis: {
      name: '相位',
      type: 'category',
      boundaryGap: false,
      data: ['0°', '90°', '180°', '270°', '360°'],
      // axisTick: {
      //   alignWithLabel:false
      // },
      // axisLine: {
      //   lineStyle: {
      //     color: '#666666'
      //   }
      // },
      //设置x轴的样式
      axisLabel: {
        //横坐标最后的标注颜色变深
        // interval: 0,
        show: true,
        textStyle: {
          color: '#000',
          fontSize: '14',
        }
      },
      show: true
    },
    yAxis: {
      name: '值',
      x: 'center',
      type: 'value',
      splitLine: {
        lineStyle: {
          type: 'solid'
        }
      },
      //设置y轴字体样式
      axisLabel: {
        show: true,
        textStyle: {
          color: '#000',
          fontSize: '14',
        }
      },
      show: true
    },
    series: [{
      name: 'A',
      type: 'line',
      smooth: true,
      data: [-50,-18, 45, 65, 30, 78, 40, 0]
    },{
        name: 'B',
        type: 'line',
        smooth: true,
        data: [-26, -12, 40, 56, 85, 65, 20, 10]
      }]
  };
  chart.setOption(option);
  return chart;
}
Page({
  data: {
    ec: {
      onInit: initChart
    }
  },
  onReady() {
  }
});

index.wxml：

<view>
  <!-- head -->
  <!-- <view class="head">
    <view class="head_config">
      当前值
      <view>-14.8dB</view>
    </view>
    <view class="head_config">
      峰值
      <view>-12.6dB</view>
    </view>
    <view class="head_config three">
      <view>注意：0</view>
      <view>告警：0</view>
    </view>
    <view class="head_train"></view>
  </view> -->
  <!-- 提示 -->
  <!-- <view class="prompt">
    <view class="prompt_span"><text class="prompt_first">同步:</text><text class="prompt_second">内</text></view>
    <view class="prompt_span"><text class="prompt_first">背景:</text><text class="prompt_second">0dB</text></view>
    <view class="prompt_span"><text class="prompt_first">背景消去:</text><text class="prompt_second">否</text></view>
    <view class="prompt_span"><text class="prompt_first">偏移:</text><text class="prompt_second">0°</text></view>
    <view class="prompt_span"><text class="prompt_first">增益:</text><text class="prompt_second">X40</text></view>
    <view class="prompt_span"><text class="prompt_first">滤波:</text><text class="prompt_second">关</text></view>
  </view> -->
  <!-- 内容 -->
  <!-- <view class="component">
 
  </view> -->
  <!--  -->
  <view class="container">
    <ec-canvas id="mychart-dom-line" canvas-id="mychart-line" ec="{{ ec }}"></ec-canvas>
  </view>
</view>

index.wxss：

/* pages/weather/weather.wxss */
ec-canvas {
width: 100%;
height: 50%;
}
 
.container {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  flex-direction: column; 
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
}
 
.picker-pos {
margin-top: -130rpx;
margin-left: 150rpx;
color: blueviolet;
}
 
 
/* .head {
  overflow: hidden;
  margin: 10rpx;
}
 
.head_config {
  float: left;
  margin-left: 6rpx;
  width: 200rpx;
  height: 100rpx;
  padding: 8rpx;
  border-radius: 12rpx;
  background-color: green;
  color: white;
  font-size: 36rpx;
}
 
.head_train{
  margin-left:8rpx;
  float: left;
  width: 40rpx;
  height: 110rpx;
  background-color: #dbdbdb;
}
 
.three{
  width: 160rpx;
}
 
.prompt{
  width: 100%;
  height: 60rpx;
  line-height: 60rpx;
  margin-top: 10rpx;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
  background-color: lightblue;
  overflow: hidden
}
.prompt_span{
  float: left;
  font-size: 28rpx;
}
.prompt_first{
  color: white;
}
.prompt_second{
  color: red;
}  */

效果如下：

其中对于全局的Echarts的样式改法，找到ec-canvas文件，如下所示，若设置背景颜色、边框之类的问题，可以在ec-canvas.wxss文件里面修改：

.ec-canvas {
  width: 100%;
  height: 100%;
  /* 给echarts图形添加边框 */
  /* border: 2rpx solid #DBDBDB; */
  /* 修改图形距离上边距 */
  margin-top: 0;
  /*给eecharts图形添加背景颜色*/
  background-color: #DBDBDB;
}

使用中遇到的问题：

• 不得不说，很多可用的信息没有，没有那么完整的为小程序服务的文档。
• 比如我的需求是怎么将x轴的精确度缩小的很小，假如我可以显示50个点，范围是[0,50]，最小的刻度即是1，那么wx-echarts是怎么设置的呢？
• 还有我的横坐标轴的样式问题可以在axisLabel 对象中设置，比如color、fontSize，那么如果我想改我的坐标轴的标题，即图中的“相位”和“值”，他们分别对应是xAxis和yAxis对象中的name属性值，这个我该如何修改显示的样式呢？
• 通过设置option中的grid对象的属性值，可以将图表内容显示在所给宽高的最大化，

grid: {
 
left: 0,//折线图距离左边距
 
right: 50,//折线图距离右边距
 
top: 30,//折线图距离上边距
 
bottom: 10,
 
containLabel: true
 
}

• 对于横纵坐标轴中的axisLabel 属性对象特别重要，比如我要复制一份表格，如果我可能一个轴设置了，另一个轴没有设置，结果会导致复制到别的地方的图表显示大小不至于的问题。如下所示：

本期的微信小程序中关于echarts的部分介绍就到这里结束了，2019的最后一个月，祝大家都能"庆余年"，在工作中收获满满。

参考：https://www.echartsjs.com/zh/option.html#xAxis.scale