vue使用echats

vue中使用echat简写
1、安装echat模块
npm install echarts --save

2、在项目中引入echat模块，并且使用它，比如在main.js中写下如下代码

import echarts from 'echarts';  //引入echats
Vue.prototype.$echarts = echarts;   //将echarts注册成Vue的全局属性

3、在自己的example.vue代码中使用它
1）界面元素中添加如下代码，用来将后续的图标文件放入容器中

<div><div id="circleCenter" class="circleCenter" ></div>
</div>

2）定义图标的相关初始化内容，并且展现在界面上

//以下方法写在method块中
draw(){// 基于准备好的dom，初始化echarts实例let myChart = this.$echarts.init(document.getElementById('barBlue'))// 绘制图表myChart.setOption({color: ['#3398DB'],tooltip : {trigger: 'axis',axisPointer : {            // 坐标轴指示器，坐标轴触发有效type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'}},grid: {left: '3%',right: '4%',bottom: '3%',containLabel: true},xAxis : [{type : 'category',data : ['7月1日', '7月2日', '7月3日', '7月4日', '7月5日', '7月6日', '7月7日', '7月8日', '7月9日'],axisTick: {alignWithLabel: true}}],yAxis : [{type : 'value'}],series : [{name:'直接访问',type:'bar',barWidth: '10%',data: [10, 52, 200, 334, 390, 330, 220, 300, 800]}]});}

3）在mounted块中调用上述代码

this.draw();

4、最终效果图

vue使用echats相关推荐

人脸识别外包比赛-会议室管理平台（vue+ELement+Echats）项目总结
Vue+Element+Echats项目总结源码链接 => ?‍?ConferencesManagement 前言最近参加了大学生服务外包比赛,我们队伍选做的是智能会议室管理系统的命题,我负 ...
vue中使用echats
效果图官方文档链接:echarts (其中大部分配置信息都在文档的配置项手册当中) 1.vue npm安装 npm install echarts --save 2.在需要的页面中引入echarts ...
Vue中使用Echarts中的地图组件报错：TypeError: api.coord is not a function
首先,既然你是Vue开发者,那么其它的就不多讲,简短的说下本人是Java开发,所以有些地方可能不适用所有人,接受大家的建议. 一. 既然在Vue中使用Echarts,那将echarts引入到vue项 ...
在 Vue 项目中使用 ECharts（菜鸟）
1. 安装Echats npm install echarts --save 2.项目入口文件main.js中引入Echarts // 引入echarts import echarts from 'e ...
echarts中x轴 y轴配置(字体颜色，线的颜色，分割线，y周单位颜色)。vue中直接使用echarts以及vue中使用vue-echarts如何配置横向渐变与纵向渐变（后者适用于前者）
vue中直接使用echarts //var myChart = this.$echarts.init(document.getElementById("echart-twoline" ...
canvas java 上传截图_在Vue项目中使用html2canvas生成页面截图并上传
使用方法项目中引入 npm install html2canvas html代码 //html代码 js代码 // 引入html2canvas import html2canvas from 'ht ...
vue实现文件上传功能
代码如下所示: <!DOCTYPE html> <html lang="en"> <head><meta charset="UT ...
win10 4步快速安装vue
1 安装nvm-windows 在这里下载安装nvm,目的是在同一台电脑中管理多个 Node 版本建议采取默认安装路径安装 2 安装nodejs 以管理员模式打开命令行,然后输入 nvm list ...
前端Vue学习之路(五)插件的使用
vant插件使用这里我们是用的语法是vue2.0 所以是 npm i vant -S 用法 1.按需引入的话找到package.json文件添加以下内容 plugins:[['import', ...

vue使用echats

vue使用echats相关推荐

最新文章

热门文章