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


Posted in Javascript onSeptember 07, 2020

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踩过的坑

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

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

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

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

用到了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的操作步骤就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
一个很简单的jquery+xml+ajax的无刷新树结构(无css,后台是c#)
Jun 02 Javascript
javascrpt绑定事件之匿名函数无法解除绑定问题
Dec 06 Javascript
IE不支持getElementsByClassName最终完美解决方案
Dec 17 Javascript
JS获取随机数函数可自定义最小值最大值
May 08 Javascript
jquery图片切换插件
Mar 16 Javascript
js实现字符串和数组之间相互转换操作
Jan 12 Javascript
适用于javascript开发者的Processing.js入门教程
Feb 24 Javascript
Javascript之Math对象详解
Jun 07 Javascript
JS实现动态给标签控件添加事件的方法示例
May 13 Javascript
用Vue写一个分页器的示例代码
Apr 22 Javascript
详解如何使用koa实现socket.io官网的例子
Nov 04 Javascript
通过JQuery,JQueryUI和Jsplumb实现拖拽模块
Jun 18 jQuery
解决vue加scoped后就无法修改vant的UI组件的样式问题
Sep 07 #Javascript
Vue.js原理分析之nextTick实现详解
Sep 07 #Javascript
小程序实现可拖动的悬浮按钮
Sep 07 #Javascript
vue 修改 data 数据问题并实时显示操作
Sep 07 #Javascript
nginx部署多个vue项目的方法示例
Sep 06 #Javascript
js实现简单的无缝轮播效果
Sep 05 #Javascript
JS+CSS实现炫酷光感效果
Sep 05 #Javascript
You might like
laravel 查询数据库获取结果实现判断是否为空
2019/10/24 PHP
laravel框架实现为 Blade 模板引擎添加新文件扩展名操作示例
2020/01/25 PHP
二行代码解决全部网页木马
2008/03/28 Javascript
在次封装easyui-Dialog插件实现代码
2010/11/14 Javascript
ToolTips JQEURY插件之简洁小提示框效果
2011/11/19 Javascript
推荐5 个常用的JavaScript调试技巧
2015/01/08 Javascript
JavaScript图像延迟加载库Echo.js
2016/04/05 Javascript
BootStrap点击下拉菜单项后显示一个新的输入框实现代码
2016/05/16 Javascript
jQuery-mobile事件监听与用法详解
2016/11/23 Javascript
Vue.js学习记录之在元素与template中使用v-if指令实例
2017/06/27 Javascript
使用Vue如何写一个双向数据绑定(面试常见)
2018/04/20 Javascript
RequireJS用法简单示例
2018/08/20 Javascript
Vue使用Canvas绘制图片、矩形、线条、文字,下载图片
2019/04/26 Javascript
Vue 中 template 有且只能一个 root的原因解析(源码分析)
2020/04/11 Javascript
在Python的Flask框架中实现单元测试的教程
2015/04/20 Python
Python使用shelve模块实现简单数据存储的方法
2015/05/20 Python
Python3连接MySQL(pymysql)模拟转账实现代码
2016/05/24 Python
python的random模块及加权随机算法的python实现方法
2017/01/04 Python
Python爬豆瓣电影实例
2018/02/23 Python
对numpy和pandas中数组的合并和拆分详解
2018/04/11 Python
python:print格式化输出到文件的实例
2018/05/14 Python
python如何获取列表中每个元素的下标位置
2019/07/01 Python
浅谈django url请求与数据库连接池的共享问题
2019/08/29 Python
python3实现高效的端口扫描
2019/08/31 Python
解决python replace函数替换无效问题
2020/01/18 Python
pandas按照列的值排序(某一列或者多列)
2020/12/13 Python
利用纯CSS3实现tab选项卡切换示例代码
2016/09/21 HTML / CSS
HTML5 UTF-8 中文乱码的解决方法
2013/11/18 HTML / CSS
阿迪达斯墨西哥官方网站:adidas墨西哥
2017/11/03 全球购物
Larsson & Jennings官网:现代瑞士钟表匠
2018/03/20 全球购物
接口可以包含哪些成员
2012/09/30 面试题
效能监察建议书
2014/05/19 职场文书
2015年清明节扫墓演讲稿
2015/03/18 职场文书
小学思品教学反思
2016/02/20 职场文书
导游词之永济鹳雀楼
2020/01/16 职场文书
Oracle配置dblink访问PostgreSQL的操作方法
2022/03/21 PostgreSQL