在项目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的动态添加控件并取值的实现代码
Sep 24 Javascript
解析Jquery取得iframe中元素的几种方法
Jul 04 Javascript
jQuery中的jQuery()方法用法分析
Dec 27 Javascript
JavaScript DOM事件(笔记)
Apr 08 Javascript
在Ubuntu系统上安装Node.JS的教程
Oct 15 Javascript
jQuery Validation PlugIn的使用方法详解
Dec 18 Javascript
JavaScript中ES6字符串扩展方法
Aug 26 Javascript
基于layer.js实现收货地址弹框选择然后返回相应的地址信息
May 26 Javascript
React Native 自定义下拉刷新上拉加载的列表的示例
Mar 01 Javascript
微信小程序中换行空格(多个空格)写法详解
Jul 10 Javascript
jQuery实现文本显示一段时间后隐藏的方法分析
Jun 20 jQuery
使用typescript构建Vue应用的实现
Aug 26 Javascript
解决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
PHP对象转换为数组函数(递归方法)
2012/02/04 PHP
PHP引用(&amp;)各种使用方法实例详解
2014/03/20 PHP
php简单实现MVC
2015/02/05 PHP
php根据日期显示所在星座的方法
2015/07/13 PHP
laravel 解决Eloquent ORM的save方法无法插入数据的问题
2019/10/21 PHP
jquery URL参数判断,确定菜单样式
2010/05/31 Javascript
javascript中检测变量的类型的代码
2010/12/28 Javascript
JS的location.href跳出框架打开新页面的方法
2014/09/04 Javascript
JavaScript常用脚本汇总(三)
2015/03/04 Javascript
jquery表单验证插件(jquery.validate.js)的3种使用方式
2015/03/28 Javascript
基于jquery实现省市联动特效
2015/12/17 Javascript
jQuery实现鼠标滑过预览图片大图效果的方法
2017/04/26 jQuery
vue 简单自动补全的输入框的示例
2018/03/12 Javascript
使用 electron 实现类似新版 QQ 的登录界面效果(阴影、背景动画、窗体3D翻转)
2018/10/23 Javascript
javascript中的with语句学习笔记及用法
2020/02/17 Javascript
如何在vue中使用jointjs过程解析
2020/05/29 Javascript
如何在JavaScript中等分数组的实现
2020/12/13 Javascript
python通过exifread模块获得图片exif信息的方法
2015/03/16 Python
深入理解Python中的*重复运算符
2017/10/28 Python
Django uwsgi Nginx 的生产环境部署详解
2019/02/02 Python
对python中GUI,Label和Button的实例详解
2019/06/27 Python
python3 assert 断言的使用详解 (区别于python2)
2019/11/27 Python
如何基于Python实现电子邮件的发送
2019/12/16 Python
python打印n位数“水仙花数”(实例代码)
2019/12/25 Python
Pytorch 实现数据集自定义读取
2020/01/18 Python
TensorFlow 显存使用机制详解
2020/02/03 Python
Python如何给函数库增加日志功能
2020/08/04 Python
CSS3 animation实现逐帧动画效果
2016/06/02 HTML / CSS
Unineed旗下时尚轻奢网站:FABHunt
2019/05/13 全球购物
俄罗斯奢侈品牌衣服、鞋子和配饰的在线商店:INTERMODA
2020/07/17 全球购物
12岁生日感言
2014/01/21 职场文书
会计自荐信范文
2014/03/09 职场文书
给校长的建议书
2014/03/12 职场文书
企业党的群众路线教育实践活动领导班子对照检查材料
2014/09/25 职场文书
地震慰问信
2015/02/14 职场文书
win10电脑右下角输入法图标不见了?Win10右下角不显示输入法的解决方法
2022/07/23 数码科技