第一步：引入echarts文件--此文件需要下載：

?下載地址：點(diǎn)擊此處進(jìn)行下載echarts文件

點(diǎn)擊Download ZIP下載壓縮包，注意：e-canvas是我從完整的文件中剝離出來的有用的，不會(huì)影響項(xiàng)目。

第二步：把整個(gè)文件放入到小程序文件里。

第三步：在需要的組件中進(jìn)行正確引入

? ? ? ? ? ? ? ?在需要使用echarts的組件的js文件里需要引入

。

第四步：案例實(shí)現(xiàn)

?4-1：在index.js中

import * as echarts from '../../ec-canvas/echarts';

function initChart(canvas, width, height, dpr) {
  const chart = echarts.init(canvas, null, {
    width: width,
    height: height,
    devicePixelRatio: dpr // new
  });
  canvas.setChart(chart);

  var option = {
    
    label: {
      normal: {
        show: true
      }
   },
    grid: {
      containLabel: true,
      x: 10, //左
      y: 40, //上
      x2: 10, //右
      y2: 10, //下
      borderWidth: 1,
    },
    legend:{
       icon:'square',
       data:['室內(nèi)溫度','室外溫度'],
       right:'10',
       itemWidth: 15,//圖標(biāo)寬
       itemHeight: 15,//圖標(biāo)高
       itemGap: 13,//間距
       textStyle:{
         color:'#9FA0A3',
         fontSize: 12,
       },
    },
    tooltip: {
      trigger: 'axis',
      backgroundColor: 'rgba(255, 255, 255, 0.8)',
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: ['10:00', '10:15', '10:30', '10:45', '11:00'],
      // show: false
    },
    yAxis: {
      type: 'value',
      min: 0,
      max: 60,
      interval: 15,
      axisLabel: {
        formatter: '{value}'
      },

      splitLine: {
        lineStyle: {
          type: 'dashed',
          color:'#9FA0A3'
        }
      }
      // show: false
    },
    series: [{
      name: '室內(nèi)溫度',
      type: 'line',
      smooth: true,
    
      data: [15, 16, 15, 17, 15, 16, 17],
      itemStyle:{
        normal:{
          color:'#12A0FF'
        }
      }
    }, {
      name: '室外溫度',
      type: 'line',
      smooth: true,
   
      data: [30, 20, 30, 35, 30, 25, 38],
      itemStyle:{
        normal:{
          color:'#D83D6C'
        }
      }
     
    }, ]
  };

  chart.setOption(option);
  return chart;
}


Page({
  data: {
    ec: {
      onInit: initChart,
    },

})

4.2:在index.wxml中

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

最后結(jié)果

文章來源地址http://www.zghlxwxcb.cn/news/detail-733960.html

到了這里，關(guān)于小程序中使用echarts的相關(guān)配置以及折線圖案例（簡單易懂）的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！