uniapp 中如何使用echart_uni-app引用Echarts的踩坑记录

在uni-app项目引用Echarts

effect.gif

demo附件：https://github.com/chellel/echarts-uniapp

按照 uni-app中使用Echarts的实践总结 的步骤引用echarts

先在uni-app新建项目，然后在命令行管理中进入到该目录下，执行

npm init

然后安装依赖。

npm install echarts mpvue-echarts --save

将下载后的三个库从node_modules剪切到项目的根目录下。

开始在项目中使用echarts。

page/index/index.vue

import * as echarts from 'echarts'

import mpvueEcharts from 'mpvue-echarts'

function initChart(canvas, width, height) {

debugger

const chart = echarts.init(canvas, null, {

width: width,

height: height

})

canvas.setChart(chart)

var option = {

title: {

text: '某站点用户访问来源',

subtext: '纯属虚构',

x: 'center'

},

tooltip: {

trigger: 'item',

formatter: "{a} {b} : {c} ({d}%)"

},

legend: {

orient: 'vertical',

bottom: '10%',

data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎']

},

series: [{

name: '访问来源',

type: 'pie',

radius: '55%',

center: ['50%', '40%'],

data: [{

value: 335,

name: &