在项目vue中使用echarts的操作步骤

1.在组件中创建该模块

<template>
 <div id = "testChart"></div>
</template>

2.导入echarts

前提是:已经在项目中配置过echarts

在<script></script>中导入echarts

<script>
import {echartInit} from "../../../utils/echartUtils"
</script>

3.初始化该模块

 export default {
  name: 'Test',  //vue该组件名称Test.vue
  mounted() {
   this.testChart = echartInit('testChart');  //初始化该echarts表
   /*this.testChart.setOption(this.option); */  // 如果是写死的数据,可以在这儿setOption()看效果
  },
}

4.将data中的option数据返回

在返回的数据(请求的数据)成功后加入setOption();

如果是写死的数据,可以在mounted中直接加入setOption()看结果;

如下为动态数据获取

export default{
data() {
   return {
    option: {
     "grid": {
      "height": "67%",
      "right": "10%",
      "top": "8%",
      "width": "83%"
     },
     "legend": {
      "data": ['新增','完成','未完成'],
      bottom: '5%'
     },
     "series": [
      {
       name: '新增',
       type: 'line',
       /*areaStyle: {},*/
       smooth: false,
       data: []
      },
      {
       name: '完成',
       type: 'line',
       /*areaStyle: {},*/  //折线下显示填充色
       smooth: false,
       data: []     //可以写固定的数据
      },
      {
       name: '未完成',
       type: 'line',
       smooth: false,  // 折线,false不平滑的折线,true平滑的曲线
       data: []      //可以写固定的数据
      },
     ],
     "toolbox": {
      "emphasis": {
       "iconStyle": {
        "textAlign": "right",
        "textPosition": "left"
       }
      },

      "orient": "vertical",
      "right": "2%",
      "show": true,
      "textStyle": {
       "align": "left"
      }
     },
     "tooltip": {
      "axisPointer": {
       "type": "shadow"
      },
      "trigger": "axis"
     },
     "xAxis": {
      "axisLine": {
       "lineStyle": {
        "color": "rgb(0, 138, 205)"
       }
      },
      "boundaryGap": true,
      "data": [],     //可以写固定的数据
      "splitLine": {
       "show": false
      },
      "splitNumber": 1,
      "type": "category"
     },
     "yAxis": {
      "min": 0,
      "splitNumber": 8,
      "type": "value"
     }
    },
    testChart: {}
   }
},
}

5.通过getData()向后台获取数据并返回,将获取的数据返回setOption()

this.testChart.setOption(this.option);

补充知识:vue+echarts踩过的坑

vue+echarts踩过的坑

文字显示居中:可以修改label的padding(只限修改个别地区)设置padding

地图只显示某一部分地区四个省份

用到了geo中regions(用了一整张中国地图,放大这四个地区某个中心点)

geo: {
map: “china”,
mapLocation: {
x: ‘center'
},
center: [“115.892151”, “28.676493”],
zoom:4.8,
label: {
normal:{
show:false
},
emphasis: {
show: false
}
},
roam: false,
itemStyle: {
normal: {
areaColor: “#fff”, //地图默认的背景颜色
borderColor: “#fff”,//地图默认的边线颜色,
opacity:0
},
emphasis: {
areaColor: “#fff”,//地图触发地区的背景颜色
}
},
regions: [
{
name: “浙江”,
label: {
normal:{
show:true,
fontSize:16,
color:'#fff',
padding:[100,4,4,4]
},
emphasis: {
show: true
},
// label:{
// formatter:'{b}',
// }
},
itemStyle: {
normal: {
areaColor: “#1FB2A8”,
borderWidth:4,
borderColor:'#fff',
opacity:1
},
emphasis: {
areaColor: “orange”, //地图触发地区的背景颜色
borderWidth:4,
borderColor:'#fff',
}
}
},
{
name: “江西”,
label: {
normal:{
show:true,
fontSize:16,
color:'#fff',
padding:[100,20,4,4]
},
emphasis: {
show: false
}
},
itemStyle: {
normal: {
areaColor: “#1FB2A8”,
borderWidth:4,
borderColor:'#fff',
opacity:1
},
emphasis: {
areaColor: “orange”, //地图触发地区的背景颜色
borderWidth:4,
borderColor:'#fff'
}
}
},
{
name: “福建”,
label: {
normal:{
show:true,
fontSize:16,
color:'#fff',
padding:[0,70,0,0]
},
emphasis: {
show: false
}
},
itemStyle: {
normal: {
areaColor: “#1FB2A8”,
borderWidth:4,
borderColor:'#fff',
opacity:1
},
emphasis: {
areaColor: “orange”, //地图触发地区的背景颜色
borderWidth:4,
borderColor:'#fff'
}
}
},
{
name: “上海”,
label: {
normal:{
show:true,
fontSize:10,
color:'#fff',
padding:[15,0,0,0]
},
emphasis: {
show: false
}
},
itemStyle: {
normal: {
areaColor: “#1FB2A8”,
borderWidth:4,
borderColor:'#fff',
opacity:1
},
emphasis: {
areaColor: “orange” ,//地图触发地区的背景颜色
borderWidth:4,
borderColor:'#fff'
}
}
}
]
},
series: [
{
type: ‘map',
coordinateSystem: ‘geo',
},
{
type: ‘map',
geoIndex: 0,
data:datass
}
],
显示问题
formatter: function (params) {
// console.log(params)
var res='';
var name='';
for (var i = 0; i < datass.length; i++) {
if (datass[i].name == params.name) {
name=<p class="big">+datass[i].name+</p>
if(datass[i].value==''){
res=''
}else{
datass[i].value.forEach(element => {
res+=<p class="small">+element+</p>
});
}
}
}
return name+res
},
y轴显示百分号
axisLabel: {
formatter: ‘{value}%'
}

以上这篇在项目vue中使用echarts的操作步骤就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们。

(0)

相关推荐

  • 在vue中添加Echarts图表的基本使用教程

    前言 我们在项目中经常需要使用一些折线图.柱状图.饼状图等等,之前使用过heightCharts,后来觉得这货不开源,只是做展示的话又点浪费时间,于是看了下eCharts,于是在vue-cli搭建的项目中添加了eCharts,下面是具体步骤和自己的一些学习笔记,参照于Echarts3官网 现在的前端一般需要完成将大量的数据,实现可视化.现在是大数据和云计算的时代,所以数据可视化逐渐变成一种趋势.而ECharts和d3.js则是可视化的成熟框架.对于制作的图表可以说是满足你的创造力. 两者相比,D

  • 详解vue文件中使用echarts.js的两种方式

    最近工作中需要用到echarts,由于项目是用的vue-cli开发的.在网上搜到vue中合成了vue-echarts,但是不想使用vue中规定好的数据格式,于是就自己做了一个vue项目引用原生echarts的简单demo,实现过程如下:用了两种实现方式 准备工作 1.安装echarts依赖 控制台输入:npm install echarts --save 2.全局引入 main.js中引入 import echarts from 'echarts' Vue.prototype.$echarts

  • vue+echarts实现动态折线图的方法与注意

    之前公司有个绘制实时盈利率折线图的需求,实现的还不错,今天来分享下vue+echarts实现动态折线图的方法. 实现代码 <template> <div id="myChart"></div> </template> <script> import echarts from 'echarts' export default { name: 'DynamicLineChart', data () { return { // 实时

  • 在项目vue中使用echarts的操作步骤

    1.在组件中创建该模块 <template> <div id = "testChart"></div> </template> 2.导入echarts 前提是:已经在项目中配置过echarts 在<script></script>中导入echarts <script> import {echartInit} from "../../../utils/echartUtils" <

  • 在vue中使用Echarts利用watch做动态数据渲染操作

    依旧直接上代码- 首先安装引入Echarts,我是直接把Echarts挂到VUE全局变量上了 //引入echarts import Vue from 'vue'; import echarts from 'echarts'; Vue.prototype.$echarts = echarts; <template> <div class="demo-container"> <div ref="chart_wrap" class="

  • 在Vue中使用echarts的实例代码(3种图)

    前言 公司的项目中需要对数据做可视化处理,高级点的D3.js目前还没接触到,因此选用了大众化的Echarts, 在vue的生态系统中已经有实现好的vue-echarts,但是使用现成的就意味着必须使用它定制好的数据结构,我也没办法对他进行一些修改.我个人也偏向于原生JS编程,因此没有采用,而是自己在vue中实现了对数据的可视化处理,先来看看效果图 以下数据已做脱敏处理 这是目前用到的三种图. 可以看到,我在图表的外部添加了标题及说明,以及右侧的选择框组件,视图可以根据选择的不同,图表进行动态切换

  • 在Vue中使用echarts的方法

    上篇文章给大家介绍了 在 webpack 中使用 ECharts的实例详解,可以点击查看. 1. 使用NPM安装(全局引入) 执行下面的命令: npm install echarts--save 引入echarts模块 在Vue项目的main.js中引入echarts模块,即是写入如下代码: import echarts from 'echarts' Vue.prototype.$echarts = echarts: 2. 按需引入 上面全局引入会将所有的echarts图表打包,导致体积过大,我

  • 在vue中使用echarts图表实例代码详解

    安装vue依赖 使用npm npm install echarts --save 使用yarn yarn add echarts 使用国内的淘宝镜像: //安装淘宝镜像 npm install -g cnpm --registry=https://registry.npm.taobao.org //从淘宝镜像下载 cnpm install echarts -S 引入ECharts 安装好的ECharts会放在node_modules目录下. 全部引入 1.直接在项目代码引入 可以直接在项目代码中

  • 在vue中使用echarts(折线图的demo,markline用法)

    公司最近在用vue开发项目,项目接近尾声了,趁休息时间写点demo-- vue引入echarts(折线图的demo) 主要是解决引入echarts,markline的使用(基准线) 这是demo的效果图: vue脚手架不多赘述 1.安装依赖 cnpm install echarts -S 2.在main.js中引入echarts import echarts from 'echarts' 3.在main.js中安装 Vue.prototype.echarts = echarts; 一般来说能正常

  • 在Vue中使用Echarts实例图的方法实例

    前言 由于在项目中需要对数据进行可视化处理,也就是用图表展示,众所周知echarts是非常强大的插件.但是新手猛的上手的话,可能会有点束手无策,所以这篇就是来写一点入门的内容,外加自己一点的小心得. 一.首先要在项目中下载echarts依赖 npm install echarts -S //或者使用淘宝的镜像 cnpm install echarts -S 二.然后就要再main.js文件中来进行全局引入 // 引入echarts import echarts from 'echarts' Vu

  • 在Vue中使用Echarts可视化库的完整步骤记录

    前言 由于最近项目需要做可视化数据展示,也就是用图表展示数据,他还有一个很高端的名字:"大数据可视化"(参考图一),首先考虑选择什么图表库来作为基础开发,目前被普遍认可的是Hcharts.Echarts.AntV. 介绍: Hcharts:国外的一款图表库,是图表库的领头羊 Echarts:百度开发的数据可视化库,国内图表库的 "领军人物" AntV:是蚂蚁金服开发的数据可视化库 总结出以下几个优略点区别Echarts.Hcharts哪个比较合适: 1.学习容易程度

  • vue中使用Echarts map图实现下钻至县级的思路详解

    今天给大家分享echarts map地图下钻至县级,因为项目需求需要实现 map 图下钻至县级,也找了很多博客,但是基本都是同一篇博客. 好在最终还是实现了,先上动图: 基本思路都是一致的,获取鼠标点击的参数跳转至指定的 JSON 需要注意的是,因为我是直接从 vue-cli2 直接跳到 vue-cli4 ,还奇怪怎么读取不到JSON,查找后才知道 vue-cli3 往后的项目基础架构对比旧版本有些区别. 以前大家都习惯在根目录下的 static文件夹下创建 JSON 文件,vue-cli3.4

  • vue中使用echarts实现动态数据绑定以及获取后端接口数据

    目录 前言 1.柱状图 2.折线图 3.饼状图 4.地图 总结 前言 之前几篇echarts的文章是实现了静态的柱状图.折线图.饼状图.地图,在项目中我们肯定是需要获取后端接口,将后端返回的数据显示在图表上,所以这次就记录一下如何实现echarts的动态数据绑定. 简单来讲,就是从接口获取到的数据,需要在图表的方法里再次定义一下,然后用setOption方法就可以获取到了. 1.柱状图 首先看接口传过来的数据,传过来一个数组,第一条年度2021,数量1,第二条年度2022,数量3 因为柱状图的数

随机推荐