在vue模板中使用echarts实现一个图表
2020-06-03 05:58
609 查看
1.下载echarts模块
npm i cnpm install echarts --save
导入
在你想要使用echarts的页面里导入
import echarts from 'echarts'
使用
定义一个echarts容器
记得设置宽高
<div id="main" style="width: 600px;height: 400px;"></div>
实例化一个echarts对象
this.charts = echarts.init(document.getElementById('main'))
this.charts.setOption({ tooltip: { trigger: 'axis' }, legend: { data: ['安全温度图'] }, grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true }, toolbox: { feature: { saveAsImage: {} } }, xAxis: { type: 'category', boundaryGap: false, data: ["1","2","3","4","5",] }, yAxis: { type: 'value' }, series: [{ name: '安全温度图', type: 'line', stack: '总量', data: this.opinionData }] })
在mounted中调用
mounted(){ this.$nextTick(function() { this.drawLine() }) }
代码
下面是这个dome的代码
<template> <!--为echarts准备一个具备大小的容器dom--> <div id="main" style="width: 600px;height: 400px;"></div></template> <script> import echarts from 'echarts'export default { name: '', data() { return { charts: '', opinionData: ["3", "2", "4", "4", "5"] } }, methods: { drawLine(id) { this.charts = echarts.init(document.getElementById(id)) this.charts.setOption({ tooltip: { trigger: 'axis' }, legend: { data: ['安全温度图'] }, grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true }, toolbox: { feature: { saveAsImage: {} } }, xAxis: { type: 'category', boundaryGap: false, data: ["1","2","3","4","5",] }, yAxis: { type: 'value' }, series: [{ name: '安全温度图', type: 'line', stack: '总量', data: this.opinionData }] })} }, //调用 mounted() { this.$nextTick(function() { this.drawLine('main') }) } } </script> <style scoped> * { margin: 0; padding: 0; list-style: none; } </style>
效果图
相关文章推荐
- C++ 使用模板实现的一个List
- C++ 使用模板实现一个List的实例
- 使用javascript原生实现一个模板引擎
- Vue中echarts图表实现loading效果实例
- 【IMWeb训练营作业】 使用 Vue 实现一个 TODO List
- 使用Vue组件实现一个简单弹窗效果
- vue中使用echarts图表自适应的几种基本解决方案
- 记录下遇到到前端VUE 使用ui时间选择器获取后台数据,更新echarts图表的输出显示到html
- 使用echarts的vue项目第一天,引用框架构建基本模板(适合没接触过的echarts的新手)
- 如何使用vue实现一个简易的购物车
- 在vue中添加Echarts图表的基本使用教程
- 一个vue实现多页面骨架屏vue-skeleton-webpack-plugin插件的使用
- 使用ECharts实现数据图表分析
- 在vue中使用echarts图表实例代码详解
- echarts图表刷新:vue中传递数据给子组件,并且监听子组件中数据的变化,实现刷新echarts图表的功能
- ECharts,一个javascript 互动图表库,使用例子。
- Vue初体验(七)使用Vue实现一个简单的聊天框
- 使用ECharts实现数据图表分析
- echarts实现一个页面同时显示多个图表
- 解决Vue使用mint-ui loadmore实现上拉加载与下拉刷新出现一个页面使用多个上拉加载后冲突问题