废话不多说；干就完了。
首先是，uniapp中使用echarts本身没啥问题；安装引用，安装官方步骤来就完了。
可是，如果到时候要打包成app，那就对不起了。因为我也不清楚的某种原因，
uniapp把图表地图之类的东西，在app的时候的写法发生了改变。主要是多了一个视图层的概念。
下面开干。
1.模板部分,不多说废话。
<!-- 注意 echarts根标签上面的自定义属性 :list & :change：lists="echartsModule.updateOpts" -->
<!-- 这两个东西是做视图层和逻辑层通信用的，下面会说。 -->
<template>
<view>
<!-- 注意标签上的属性；为了逻辑层与视图层进行通信的；没有就通信不了 -->
<view class="myEcharts" id="myEcharts" :lists="lists" :change:lists="echartsModule.updateOpts">
</view>
</view>
</template>2.逻辑层，啥意思呢，就是平时写vue的时候script标签里面的内容，在这里称之为逻辑层
<script>
export default {
props: {
reportData: {
type: Object,
required: () => {}
},
},
computed:{
// 小技巧；想监听一个对象的部分属性的实现，利用计算属性结构出要监听的部分
lists(){
const {upList,downList} = this.reportData && this.reportData.extend2
return {upList,downList}
}
},
methods:{
// 逻辑层声明的方法，下面会被视图层进行调用的；也可以理解为一个回调函数
// 需要视图层传参数到逻辑层的时候用的
updateUrl(val){
this.reportData.extend2.imgUrl = val
}
}
}
</script>3.视图层；这玩意很特别，是uniapp为了加速视图渲染搞出来的。个人觉得难用，不成熟。
script标签里面关键字 renderjs 代表渲染层 也叫视图层，跟逻辑层完全隔离
<script module="echartsModule" lang="renderjs">
import * as echarts from 'echarts'
export default {
data() {
return {
myChart: '',
}
},
mounted(options) {
if (typeof window.echarts === 'object') {
this.drawLines()
} else {
// 动态引入类库
const script = document.createElement('script')
script.onload = this.drawLines()
document.head.appendChild(script)
}
},
methods: {
drawLines() {
// 这里是初始化的方式，通过id查询找到你的canvas标签
this.myChart = echarts.init(document.getElementById('myEcharts'))
this.setOption()
this.myChart.resize()
},
// 这个方法是标签上面传递的属性lists发生变化的时候触发的方法
// 实现逻辑层跟视图层通信的
updateOpts(newVal, oldVal, ownerVm, vm){
this.setOption(newVal.upList,newVal.downList)
},
setOption(upList = [], downList = []) {
const option = {
grid: {
left: '8%',
right: '20%',
bottom: '3%',
containLabel: true,
},
xAxis: {
type: 'category',
name: '载荷(kg)',
data: ['30%', '40%', '50%', '60%'],
},
yAxis: {
type: 'value',
name: '电流(A)',
},
series: [{
type: 'line',
data: upList,
},
{
type: 'line',
data: downList,
},
],
}
if (this.myChart) {
this.myChart.setOption(option)
//下面这行代码就是视图层调用逻辑层的方法，并且传参数到逻辑层
this.$ownerInstance.callMethod('updateUrl',this.myChart.getDataURL("jpg"))
}
}
},
}
</script>总结
1.比较麻烦的就是逻辑层和视图层之间的通信，其他的稍微理解一下就行
2.模板中调用视图层的方法需要加上script标签上的module属性值；要不然调不通
3.特别注意；这东西如果要做app需要在真机或者模拟器上面调试；如果用H5根本发现不了问题
4.关于逻辑层和视图层之间的通信，我试过很多方法（订阅发布、父组件转发、vuex），都没有用。只能用这种比较烂的方法；头皮发麻。
5.视图层中 props接受不到数据，写也没有用
