@wines/echarts NPM

`@wines/echarts`

Echarts 图表

Echarts

使用指南

在 page.json 中引入组件

{
  "navigationBarTitleText": "Echarts",
  "usingComponents": {
    "wux-avatar": "@wines/echarts"
  }
}

示例

<view class="page">
	<view class="page__hd">
		<view class="page__title">Echarts</view>
		<view class="page__desc">图表</view>
	</view>
	<view class="page__bd">
		<wux-echarts
		 id="mychart-dom-line"
		 height="200px"
		 width="100%"
		 canvas-id="mychart-line"
		 ec="{{ ec }}"
		></wux-echarts>
	</view>
</view>

import { wineEcharts as echarts } from '@wines/echarts';
import './index.less';

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

  const option = {
    tooltip: {
      trigger: 'axis',
    },
    grid: {
      top: 10,
      right: 10,
      bottom: 10,
      left: 20,
      containLabel: true,
    },
    xAxis: {
      type: 'category',
      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
      axisTick: {
        alignWithLabel: true,
      },
    },
    yAxis: {
      type: 'value',
      axisLabel: {
        formatter: '{value}%',
      },
    },
    series: [
      {
        data: [150, 230, 224, 218, 135, 147, 260],
        type: 'line',
      },
    ],
  };
  chart.setOption(option);
  return chart;
}

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

  onClick(e) {
    console.log('onClick', e.detail);
    if (e.detail.index === 3) {
      void wx.switchTab({
        url: '/pages/index/index',
      });
    }
  },
  onContact(e) {
    console.log('onContact', e);
  },
  onGotUserInfo(e) {
    console.log('onGotUserInfo', e);
  },
  onGotPhoneNumber(e) {
    console.log('onGotPhoneNumber', e);
  },
  onChange(e) {
    console.log('onChange', e);
  },
});