下載

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

????echarts options：https://echarts.apache.org/zh/option.html#legend

????解壓之后把 ec-canvas 文件拷貝到小程序項目中

WXML

<view class="container">
  <view class="echarts">
    <ec-canvas id="myChart" canvas-id="myChart" ec="{{ec}}"></ec-canvas>
  </view>
</view>

JS

// 1、引入腳本
import * as echarts from '../../components/ec-canvas/echarts';
function initChart(canvas, width, height) {
  const chart = echarts.init(canvas, null, {
    width: width,
    height: height
  });
  canvas.setChart(chart);

  var option = {
    title: {
      text: '英雄戰(zhàn)績', // 主標題文本，支持使用 \n 換行
      top: 10, // 定位 值: 'top', 'middle', 'bottom' 也可以是具體的值或者百分比
      left: 'center', // 值: 'left', 'center', 'right' 同上
      textStyle: { // 文本樣式
        fontSize: 16,
        fontWeight: 600,
        color: '#000'
      }
    },
    // 設置圖表的位置
    grid: {
      x: 5, // 左間距
      y: 70, // 上間距
      x2: 8, // 右間距
      y2: 10, // 下間距
      containLabel: true // grid 區(qū)域是否包含坐標軸的刻度標簽, 常用于『防止標簽溢出』的場景
    },
    // dataZoom 組件 用于區(qū)域縮放
    dataZoom: [
      {
        type: 'inside',
        xAxisIndex: [0], // 設置 dataZoom-inside 組件控制的 x 軸
        // 數(shù)據(jù)窗口范圍的起始和結(jié)束百分比  范圍: 0 ~ 100
        start: 0,
        end: 30
      }
    ],
    tooltip: {
      trigger: 'axis', // 觸發(fā)類型, axis: 坐標軸觸發(fā)
      axisPointer: {
        type: 'none' // 指示器類型，可選 'line'、'shadow'、'none'、'cross'
      },
      // 提示框浮層內(nèi)容格式器，支持字符串模板和回調(diào)函數(shù)兩種形式
      // 折線（區(qū)域）圖、柱狀（條形）圖、K線圖 : {a}（系列名稱），（類目值），{c}（數(shù)值）, isag0ks（無）
      formatter: '\n{a0}: {c0}萬\n{a1}: {c1}%'
    },
    legend: { // 圖例的數(shù)據(jù)數(shù)組
      data: [ // 圖例項的名稱 與 series 里的 name 相對應
        { name: '場次' },
        { name: '勝率' }
      ],
      itemWidth: 13, // 圖例標記的圖形寬度
      itemHeight: 13, // 圖例標記的圖形高度
      // 圖例項的 icon  值: 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none'
      icon: 'roundRect', 
      top: 33, // 定位
      right: 5,
      textStyle: { // 文本樣式
        fontSize: 13,
        color: '#000'
      }
    },
    xAxis: {
      // 坐標軸軸線
      axisLine: {
        lineStyle: {
          type: 'solid', // 坐標軸線線的類型 'solid', 'dashed', 'dotted'
          width: 1, // 坐標軸線線寬, 不設置默認值為 1
          color: '#000' // 坐標軸線線的顏色
        }
      },
      // 坐標軸刻度
      axisTick: {
        show: false
      },
      // 分隔線
      splitLine: {
        show: false
      },
      // 坐標軸刻度標簽
      axisLabel: {
        fontSize: 12, // 文字的字體大小
        color: '#000', // 刻度標簽文字的顏色
        // 使用函數(shù)模板   傳入的數(shù)據(jù)值 -> value: number|Array,
        formatter: '{value}'
      },
      data: ['上官婉兒','王昭君','老夫子','狄仁杰','墨子','盤古','豬八戒','伽羅','李信','云中君','瑤','米萊迪']
    },
    yAxis: [{
      type: 'value', // 坐標軸類型,   'value' 數(shù)值軸，適用于連續(xù)數(shù)據(jù)
      name: '單位/萬', // 坐標軸名稱
      nameLocation: 'end', // 坐標軸名稱顯示位置 'start', 'middle' 或者 'center', 'end'
      nameTextStyle: { // 坐標軸名稱的文字樣式
        align: 'center', // 文字水平對齊方式，默認自動,可選 'left'、'center'、'right'
        fontSize: 12, // 坐標軸名稱文字的字體大小
        fontStyle: 'normal', // 坐標軸名稱文字字體的風格, 可選 'normal'、'italic'、'oblique'
        // 坐標軸名稱文字字體的粗細, 可選 'normal'、'bold'、'bolder'、'lighter'、100 | 200 | 300 | 400...
        fontWeight: 'normal'
      },
      nameGap: 15, // 坐標軸名稱與軸線之間的距離
      // 坐標軸刻度
      axisTick: {
        show: true // 是否顯示坐標軸刻度 默認顯示
      },
      // 坐標軸軸線
      axisLine: { // 是否顯示坐標軸軸線 默認顯示
        show: true, // 是否顯示坐標軸軸線 默認顯示
        lineStyle: { // 坐標軸線線的顏色
          color: '#000'
        }
      },
      // 坐標軸在圖表區(qū)域中的分隔線
      splitLine: {
        show: false // 是否顯示分隔線。默認數(shù)值軸顯示
      },
      // 坐標軸刻度標簽
      axisLabel: {
        show: true, // 是否顯示刻度標簽 默認顯示
        fontSize: 13, // 文字的字體大小
        color: '#000', // 刻度標簽文字的顏色
        // 使用字符串模板，模板變量為刻度默認標簽 {value}
        formatter: '{value}'
      }
    },
    // 右側(cè)Y軸
    {
      // 坐標軸刻度
      axisTick: {
        show: true // 是否顯示坐標軸刻度 默認顯示
      },
      // 坐標軸軸線
      axisLine: { // 是否顯示坐標軸軸線 默認顯示
        show: true, // 是否顯示坐標軸軸線 默認顯示
        lineStyle: { // 坐標軸線線的顏色
          color: '#000'
        }
      },
      // 坐標軸在圖表區(qū)域中的分隔線
      splitLine: {
        show: false // 是否顯示分隔線 默認數(shù)值軸顯示
      },
      axisLabel: {
        show: true,
        fontSize: 13,
        color: '#000',
        // 使用字符串模板，模板變量為刻度默認標簽 {value}
        formatter: '{value}%'
      }
    }],
    // 系列列表
    series: [
      {
        type: 'bar', // 系列類型
        name: '場次', // 系列名稱, 用于tooltip的顯示, legend 的圖例篩選
        barMaxWidth: 12, // 柱條的最大寬度，不設時自適應
        barGap: 0, // 不同系列的柱間距離, 為百分比  默認值為30%
        // 圖形上的文本標簽
        label: {
          show: false,
          fontSize: 13,
          color: '#fff'
        },
        // 圖形樣式
        itemStyle: {
          // 柱條的顏色, 這里是漸變色, 默認從全局調(diào)色盤 option.color 獲取顏色
          color: {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [{
              offset: 0,
              color: '#FAB363' // 0% 處的顏色
            }, {
              offset: 1,
              color: '#FB7C2B' // 100% 處的顏色
            }]
          },
          barBorderRadius: [10, 10, 0, 0] // 圓角半徑, 單位px, 支持傳入數(shù)組分別指定 4 個圓角半徑
        },
        // 系列中的數(shù)據(jù)內(nèi)容數(shù)組
        data: [200, 330, 400, 600, 830, 650, 690, 430, 550, 420, 420, 320]
      },
      {
        type: 'line', // 系列類型
        name: '勝率', // 系列名稱, 用于tooltip的顯示, legend 的圖例篩選
        symbol: 'circle', // 標記的圖形
        symbolSize: 11, // 標記的大小
        yAxisIndex: 1, // 使用的 y 軸的 index，在單個圖表實例中存在多個 y 軸的時候有用
        // 圖形的樣式
        itemStyle: {
          color: '#11abff'
        },
        // 線的樣式, 修改 lineStyle 中的顏色不會影響圖例顏色, 一般不設置線的樣式
        lineStyle: {
          type: 'solid', // 線的類型 'solid', 'dashed', 'dotted'
          color: '#11abff'
        },
        // 圖形上的文本標簽
        label: {
          show: false,
          fontSize: 13,
          color: '#fff'
        },
        // 系列中的數(shù)據(jù)內(nèi)容數(shù)組
        data: [20, 24, 33, 45, 63, 50, 42, 24, 23, 14, 20, 10]
      }
    ]
  };
  chart.setOption(option);
  return chart;
}

Page({
  data: {
    ec: {
     >: initChart // 初始化并設置
    }
  },
  /**
   * 生命周期函數(shù)--監(jiān)聽頁面加載
   */
 >: function (options) {
    
  },
  /**
   * 生命周期函數(shù)--監(jiān)聽頁面顯示
   */
 >: function () {
    
  }
})

WXSS

page {
  background: #fff;
}
.container {
  width: 100%;
}
.echarts {
  width: 100%;
  height: 500rpx;
}
ec-canvas {
  width: 100%;
  height: 100%;
}

JSON

{
  "navigationBarTitleText": "搜索",
  "usingComponents": {
    "ec-canvas": "../../components/ec-canvas/ec-canvas"
  }
}