微信小程序使用echart插件绘图（实用方便）

本案例在MPX框架下使用，大家可以根据自己的框架去使用

首先要在小程序设置中引用插件

点击添加插件搜索所需插件即可

点击详情即可查看插件的开发文档

根据开发文档试试吧

在app文件的json中引入

<script>
  import mpx, { createApp } from '@mpxjs/core'
  import apiProxy from '@mpxjs/api-proxy'

  mpx.use(apiProxy, { usePromise: true })
  // app.js
  createApp({
    onLaunch () {
    }
  })
</script>

<style>

</style>

<script type="application/json">
  {
    "pages": [
      "./pages/example",
      "./pages/index",
    ],
    "plugins": {
      "echarts": {
        "version": "1.0.5",
        "provider": "wx1db9e5ab1149ea03"
      }
    }
  }
</script>

<!--也可以通过以下形式用js输出json，便于书写注释和使用条件编译-->

<!--<script name="json">-->
<!--  // 可以写注释，通过defs注入的常量做一些判断之类的操作-->
<!--  module.exports = {-->
<!--    pages: [-->
<!--      './pages/index'-->
<!--    ]-->
<!--  }-->
<!--</script>-->

在页面上使用

<template>
  <view class="container">
    <chart chart-class="chart" option="{{ option }}" bindinstance="onInstance" />
  </view>
  <button bindtap="editData">改数据</button>
</template>

<script>
import { createPage } from '@mpxjs/core'
createPage({
  data: {
    option: {
      title: {
        text: '直方图',
        padding: [15, 100, 10, 10]
      },
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
        }
      },
      grid: {
        left: 20,
        right: 20,
        bottom: 15,
        top: 40,
        containLabel: true
      },
      xAxis: [
        {
          type: 'value',
          axisLine: {
            lineStyle: {
              color: '#5C89FF'
            }
          },
          axisLabel: {
            color: '#666'
          }
        }
      ],
      // y轴
      yAxis: [
        {
          type: 'category',
          axisTick: { show: false },
          data: [
            'XXX县',
            'XXX县',
            'XXX县',
            'XXX县',
            'XXX县',
            'XXX县',
            'XXX县',
            'XXX县',
            'XXX县',
            'XXX县'
          ],
          axisLine: {
            lineStyle: {
              color: '#999'
            }
          },
          axisLabel: {
            color: '#666'
          }
        }
      ],
      series: [
        {
          name: '人口',
          type: 'bar',
          label: {
            normal: {
              formatter: '{c}',
              show: true,
              textStyle: {
                fontSize: '12',
                color: '#fff'
              }
            }
          },
          // data: [],
          data: [1000, 2000, 3000, 4000, 5000, 6000, 7000, 8000, 9000, 10000],
          itemStyle: {
            color: '#E92F20',
            barBorderRadius: [0, 16, 16, 0]
          },
          barWidth: '25'
        }
      ]
    },
    obj: null
  },
  onLoad() {
  },
  methods: {
    onInstance(e) {
      const instance = e.detail
      console.log(instance)
      this.obj = instance
    },
    editData() {
      console.log(this.obj)
      this.option.title.text = '修改'
      this.option.series[0].data = [100,200,300,400,500,600,700,800,900,1000]
      this.obj.setOption(this.option)
    } 
  }
})
</script>

<script type="application/json">
  {
    "usingComponents": {
      "chart": "plugin://echarts/chart"
    }
  }
</script>
<style lang="stylus" scoped>
.container
  width 100%
  height 600px
  .chart
    height 100%
    width 100%
</style>

图表的高度宽度最好占满，这里只是作为例子。

这里是自带一个方法可以获取到echart实例对象

这个方法是封装好的，页面一进来它就会被调用，具体可以看插件开发文档

这里在页面中定义一个全局的变量obj用于接收复制的echart实例对象，有了这个obj就可以在页面任意方法去修改图表数据重新渲染了

写了个例子修改图表数据重新渲染

这里是写了假数据修改option,在实际中应该根据接口返回的数据进行重新赋值

这里必须用echart实例对象obj调用setOption()方法才能重新渲染图表，不然是没效果的。

刚开始的图表

点击修改后的图表

封装成组件

<template>
    <view class="container">
      <chart chart-class="chart" option="{{ option }}" bindinstance="onInstance" />
    </view>
</template>
<script>
  import { createComponent } from '@mpxjs/core'

  createComponent({
    properties: {
      option: {
        type: Object,
        value: {}
      }
    },
    data: {
      echart: null
    },
    methods: {
      onInstance(e) {
        const instance = e.detail
        this.echart = instance
      }
    }
  })
</script>
<script type="application/json">
  {
    "usingComponents": {
      "chart": "plugin://echarts/chart"
    }
  }
</script>
<style lang="stylus" scoped>
.container
  width 100%
  height 400px
  .chart
    height 100%
    width 100%
</style>

在页面上引用组件

<template>
  <pie id="myPie" option="{{option}}"></pie>
  <button bindtap="editData">改数据</button>
</template>

<script>
import { createPage } from '@mpxjs/core'

createPage({
  data: {
    option: {
      title: {
        text: '某站点用户访问来源',
        left: '5%',
        top: '5%'
      },
      tooltip: {
        trigger: 'item',
        formatter: '{a} \n{b} : {c} ({d}%)'
      },
      legend: {
        orient: 'vertical',
        left: '5%',
        right: '5%',
        bottom: '10%',
        orient: 'horizontal',
        textStyle: {
          fontSize: 12
        },
        data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎']
      },
      series: [
        {
          name: '访问来源',
          type: 'pie',
          radius: '55%',
          center: ['50%', '40%'],
          data: [
            { value: 335, name: '直接访问' },
            { value: 310, name: '邮件营销' },
            { value: 234, name: '联盟广告' },
            { value: 135, name: '视频广告' },
            { value: 1548, name: '搜索引擎' }
          ],
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          }
        }
      ]
    }
  },
  onLoad() {},
  methods: {
    editData() {
      // 获取页面中组件DOM实例
      const pieDomObj = this.selectComponent('#myPie')
      // 打印组件实例中的echart对象
      console.log(pieDomObj.echart)
      // 修改option的数据
      this.option.title.text = '修改'
      this.option.series[0].data = [
            { value: 335, name: '访问' },
            { value: 310, name: '营销' },
            { value: 234, name: '广告' },
            { value: 135, name: '视频' },
            { value: 148, name: '引擎' }
          ]
      // 用echart对象调用setOption重新渲染图表
      pieDomObj.echart.setOption(this.option)
    }
  }
})
</script>

<script type="application/json">
  {
    "usingComponents": {
      "pie": "../components/pie.mpx"
    }
  }
</script>
<style lang="stylus" scoped>
.container
  width 100%
  height 400px
  .chart
    height 100%
    width 100%
</style>

在引用组件的页面上修改图表数据有丶不一样，具体看代码需要先获取到组件对象，再获取组件里的echart实例对象