uniapp引用echarts的方法：1、通过uni-app官网直接安装echarts插件生成echarts项目模板；2、创建一个新的hello uni-app项目模板；3、把echarts放到components中。
本教程操作环境：windows7系统、uni-app2.5.1版本，Dell G3电脑。
推荐（免费）：uni-app教程
uni-app 引入 echarts
// import * as echarts from '@/components/echarts/echarts.simple.min.js'; // import mpvueEcharts from '@/components/mpvue-echarts/src/echarts.vue';import * as echarts from '../echarts/echarts.simple.min.js'import mpvueEcharts from '../mpvue-echarts/src/echarts.vue' export default { data() { return { updateStatus: false, line: { legend: { data: ['邮件营销'] }, xAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] }, yAxis: { type: 'value', data: [] }, dataZoom: [{ type: 'slider', start: 30, end: 100, zoomLock: false, }], grid: { left: 40, right: 40, bottom: 20, top: 40, containLabel: true }, series: [{ data: [], data: [820, 932, 901, 934, 1290, 1330, 1320], type: 'line', color: ['#5eb4e2'], //折线条的颜色 }] } } }, methods: { lineInit(e) { let { width, height } = e; let canvas = this.$refs.lineChart.canvas echarts.setCanvasCreator(() => canvas); let lineChart = echarts.init(canvas, null, { width: width, height: height }) canvas.setChart(lineChart) lineChart.setOption(this.line) this.$refs.lineChart.setChart(lineChart) }, }, components: { mpvueEcharts } } .ec-canvas { display: flex; height: 100%; flex: 1; } .canvasView { width: 700upx; height: 500upx; }
登录后复制
1、通过 uni-app 官网直接安装echarts 插件 生成 echarts项目模板
2、在Hbuilder中创建一个新的hello uni-app项目模板
3、把echarts模板中 components 下面的 echarts 放到自己项目components 中
4、把hello uni-app模板中 components 下面的mpvue-echarts 放到自己项目components 中
以上就是uniapp中如何引用echarts的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/3031145.html
