mpvue框架中使用 Echarts

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接： https://blog.csdn.net/qq_33871182/article/details/102743558

安装 mpvue-echarts 及 echarts 插件

mpvue-echarts

npm i mpvue-echarts --save

echarts

npm i echarts --save
由于echarts文件过大，故不安装，前往官网定制echats，后引用静态js
vue文件中以组件的形式使用

<template>
  <div class="echarts-wrap">
    <mpvue-echarts :echarts="echarts" :onInit="onInit" canvasId="demo-canvas" />
  </div>
</template>
<script>

import echarts from '../../../../../static/utils/echarts.min'

import mpvueEcharts from '../../../../../node_modules/mpvue-echarts'

let chart = null

function initChart(canvas, width, height) {
  chart = echarts.init(canvas, null, {
    width: width,
    height: height
  });
  canvas.setChart(chart);
 
  var option = {}; // ECharts 配置项
 
  chart.setOption(option);
 
  return chart; // 返回 chart 后可以自动绑定触摸操作
}

export default {
  components: {
    mpvueEcharts
  },
  data () {
    return {
      echarts,
      onInit: initChart
    }
  }
}

</script>

<style scoped>
.echarts-wrap {
  width: 100%;
  height: 300px;
}
</style>

这对于所有 ECharts 图表都是通用的，用户只需要修改上面 option 的内容，即可改变图表。option 的使用方法参见 ECharts 配置项文档。
属性

名称	类型	默认值	属性
canvasId	String	ec-canvas	canvasId
disableTouch	Boolean	false	禁用触摸事件
echarts	Object	null	echarts 对象
lazyLoad	Boolean	false	懒加载
onInit	Function	null	初始化函数
throttleTouch	Boolean	false	节流触摸事件

FAQ
重要] 不要把 chart 实例赋值到 this（vue 实例） 上
如何获取图表实例？
echarts.init 返回的即为图表实例。

图表变空白？
尝试设置 throttleTouch 属性为 true。

bug
不支持
Tooltip
图片
多个 zlevel 分层
安卓平台：transform 的问题（会影响关系图边两端的标记位置、旭日图文字位置等）
iOS 平台：半透明略有变深的问题
iOS 平台：渐变色出现在定义区域之外的地方