微信小程序应用echarts

标签：canvas color 微信 程序 height width params echarts

1、clone官方库echarts-for-weixin到本地，将其中的ec-canvas目录复制到自己项目的某个目录下（如components）

2、在自己的组件或页面中（.json文件），按如下方式使用，路径根据自己的项目具体设置

{
  "usingComponents": {
    "ec-canvas": "../components/ec-canvas/ec-canvas"
  }
}

3、在页面中引用(.wxml)

样式：

/* 折线图 */ .overview-charts { width: 100%; height: 560rpx; }

 
<view class="overview-charts">
          <ec-canvas style="width: 100%; height: 560rpx;z-index: 1;" id="my-analysis-chart" canvas-id="my-analysis-line" ec="{{ overviewChart }}"></ec-canvas>
        </view>

4、在.js文件中，获取图标数据，然后获取echarts实例，设置数据和配置项

data: {
overviewChart: {
      // 将 lazyLoad 设为 true 后，需要手动初始化图表
      lazyLoad: true
    },
}

// 折线图
  initLineChart(chartData) {
    let myAnalysisComponent = this.selectComponent('#my-analysis-chart');
    myAnalysisComponent.init((canvas, width, height, dpr) => {
      // 获取组件的 canvas、width、height 后的回调函数
      // 初始化图表
      const lineChart = echarts.init(canvas, null, {
        width: width,
        height: height,
        devicePixelRatio: dpr
      });
      this.setLineChartOption(lineChart, chartData)
      return lineChart;
    });
  },
  setLineChartOption(chart, chartData) {
    const option = {
      grid: {
        top: 10,
        left: '2%',
        right: '2%',
        bottom: '3%',
        containLabel: true
      },
      tooltip: {
        trigger: 'item',
        borderColor: '#FFFFFF',
        formatter: (params) => {
          console.log('params--',params);
          let str = params.name + '\n'
          str += `${params.marker}${params.seriesName}: ${params.value}`
          return str;
        }
      },
      dataZoom: [
        //滑动条
        {
          xAxisIndex: 0, //这里是从X轴的0刻度开始
          show: true, //是否显示滑动条，不影响使用
          type: "inside", // 这个 dataZoom 组件是 slider 型 dataZoom 组件
          startValue: 0, // 从头开始。
          endValue: 6, // 一次性展示6个。
          zoomLock: false,
        },
      ],
      xAxis: {
        type: 'category',
        data: chartData.xdata || [],
        axisLabel: {
          interval: 0,
          rotate: 70
        }
      },
      yAxis: {
        minInterval: 1,
        type: 'value'
      },
      series: [
        {
          name: '折线图',
          lineStyle: {
            color: '#0075EF'
          },
          areaStyle: {
            color: {
              type: 'linear',
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [{
                offset: 0, color: 'rgba(0,117,239,0.15)' // 0% 处的颜色
              }, {
                offset: 1, color: 'rgba(0,117,239,0)' // 100% 处的颜色
              }],
              global: false // 缺省为 false
            }
          },
          symbol: 'circle',
          symbolSize: '6',
          itemStyle: {
            // 设置symbol的颜色
            normal: {
              color: '#0075EF'
            }
          },
          data: chartData.ydata || [],
          type: 'line'
        }
      ]
    };
    chart.setOption(option);
    return chart;
  },

 

标签：canvas,color,微信,程序,height,width,params,echarts
From： https://www.cnblogs.com/sgdkg/p/18655797