风尚云网笔记-vue中echarts引入

风尚云网学习vue中echarts引入

1.首先npm安装：

npm install echarts

2.main.js引入

//全部引入  echarts
import * as echarts from 'echarts'
Vue.prototype.$echarts = echarts

3.在需要引入的echarts的vue页面中

    <divref="monthWorkOrder"class="echarts-box"style="width: 100%; height: 400px; margin-top: 20px"></div>

created

 this.initMonthWorkOrder();

    // echarts相关方法initMonthWorkOrder() {let myChart = this.$echarts.init(this.$refs.monthWorkOrder);let options = {tooltip: {trigger: "axis",axisPointer: {type: "cross",label: {backgroundColor: "#6a7985",},},},legend: {data: ["成功订单", "失败订单", "消费金额", "总订单"],},grid: {left: "3%",right: "4%",bottom: "3%",containLabel: true,},toolbox: {show: true,feature: {dataZoom: {yAxisIndex: "none",},dataView: { readOnly: false },magicType: { type: ["line", "bar"] },saveAsImage: {},},},xAxis: {type: "category",boundaryGap: false,data: this.createTime,},yAxis: {type: "value",alignTicks: true, // show :false,},series: [{name: "成功订单",type: "line", // stack: "Total",color: "#67c23a",data: this.successCount,label: {show: true,position: "right",},},{name: "失败订单",type: "line", // stack: "Total",color: "#B80000",data: this.errorCount,label: {show: true,position: "left",},},{name: "总订单",type: "line", // stack: "Total",color: "#409eff",data: this.allCount, // 显示数据label: {show: true,position: "top",},},{name: "消费金额",type: "line",color: "gold", // stack: "Total",data: this.successConsume,label: {show: true,position: "bottom",},},],}; // 初始化myChart.setOption(options);},

风尚云网笔记-vue中echarts引入相关推荐

风尚云网前端-vue中动态显示动态时间2种方式
一:时间1方法: 首先在data中写入: timer: undefined, 定一个计时器 nowTime: new Date(),当前时间 data中: data() {return { //时间1 ...
vue 引入json地图_vue中echarts引入中国地图的案例
如下所示: mounted() { this.drawLine(); }, drawLine(){ // 基于准备好的dom,初始化echarts实例 var myChartContainer = d ...
vue 中 echarts 中国地图
我们先来看一下效果说明:echarts 版本 "echarts": "^4.2.0-rc.2", 版本高的话,node_model 里面没有 map ...
Cesium 开发笔记-Vue 中使用 Cesium（vue-cli-plugin-cesium）
Cesium 开发笔记-Vue 中使用 Cesium(vue-cli-plugin-cesium) 通常情况下,我们要在 Vue 中使用 Cesium,首先要安装 Cesium,然后要在 vue-cl ...
Vue中import引入模块路径时的@符号
Vue中import引入模块路径时的@符号 1.ES6 模块主要有两个功能:export 和 import export:用户对外输出本模块(一个文件可以理解为一个模块,比如 aaa.js bbb.j ...
vue中echarts自适应屏幕大小
vue中echarts自适应屏幕大小,延迟执行项目中出现echarts适应屏幕大小,有时会遇到不管屏幕大小如何变化echarts图表大小不变的情况:或者出现图表变化延迟的情况,针对这两种情况,分别解 ...
vue中如何引入指定字体并且使用
vue中如何引入指定字体并且使用步骤一:在src下建立文件夹fonts fonts下引入字体文件且建立一个css文件在css中定义字体样式 @font-face { font-family: '字 ...
vue中图片引入问题以及实现openlayers地图标记
最近因为工作需要,在研究openlayers地图的使用,但是卡在了地图标记这块,不论我怎么尝试,标记就是不会显示在地图上,反反复复看了很多博客,也研究了文档,都觉得没有问题,也用html尝试了,标记可 ...
vue中怎么引入字体包（超详细）
vue中怎么引入字体包一.创建文件并添加字体包 1.在src里面的assets文件中创建text文件(没有assets文件可以自己创建一个,也可以不用此命名): 2.把字体包放入text文件,并创建 ...
vue中echarts折线图双折线，鼠标悬浮时间，将两个X轴的内容以及Y轴的内容全部显示出来
vue中echarts折线图双折线,鼠标悬浮时间,将两个X轴的内容以及Y轴的内容全部显示出来: 只要修改一个地方,用formatter方法 tooltip: {trigger: 'axis',axis ...

风尚云网笔记-vue中echarts引入

风尚云网笔记-vue中echarts引入相关推荐

最新文章

热门文章