版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
安装 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 平台:渐变色出现在定义区域之外的地方