uniapp怎么引入echarts?
uniapp是不能直接使用echarts来做数据统计的,需要引入renderjs-echarts-demo插件,只支持H5和APP[https://ext.dcloud.net.cn/search?q=renderjs-echarts-demo]
使用hbuilder导入插件之后就可以看出只有echarts.js是有用的,只需要将这个js文件放入自己的static文件夹就可以了。
在template写入对应的组件,prop就是对应的参数配置,将参数配置定义在data中。
<view :prop="daily_option" :change:prop="echarts.updateDailyChart" id="daily" class="echarts"></view>
创建一个vue页面, 添加多一个script,module=“echarts” lang=“renderjs”
<script module="echarts" lang="renderjs">
export default {
mounted() {
if (typeof window.echarts === 'function') {
this.initEcharts();
} else {
// 动态引入较大类库避免影响页面展示
const script = document.createElement('script')
// view 层的页面运行在 www 根目录,其相对路径相对于 www 计算
script.src = 'static/echarts.js'
script.onload = this.initEcharts.bind(this)
document.head.appendChild(script)
}
},
methods: {
initEcharts() {
var that=this;
setTimeout(function(){
that.$nextTick(function(){
let daily_chart = echarts.init(document.getElementById('daily'));
daily_chart.setOption(that.daily_option);
})
window.onresize = function () {
daily_chart.resize();
}
},500)
},
updateDailyChart(newValue, oldValue, ownerInstance, instance) {
//监听 service 层数据变更
let daily_chart = echarts.init(document.getElementById('daily'));
daily_chart.setOption(newValue);
}
}
}
</script>
使用echarts遇到的问题
- 动态数据的渲染: 以这样的方式赋值进去that.daily_option.title.text="{a|今日走访}{c|\n}"+today;
- **在真机测试的时候不显示:**在初始化的时候给一个500ms的延迟, setTimeout(function(){
that.$nextTick(function(){
},500) - 数据的更改功能: :change:prop="echarts.updateDailyChart"就是数据更改需要做的操作;
这样echarts图表就出来了