ECharts的基本使用

news/2024/11/24 21:37:47/

目录

一、使用前提

1、安装

2、创建文件

二、LineView.vue文件【相当于一个组件】

1、导入

2、methods方法下写init(){}方法进行选择

3、methods方法下写setOptioin(option)

4、init()函数调用

5、整合完整代码

三、IndexView.vue文件【实现组件引入显示】

1、引入

2、注册

3、显示

四、数据操作

1、series系列

2、title标题

3、legend图例

4、tooltip提示框

五、地图

1、前期准备

2、设置配置项

3、点击事件

六、动态数据渲染

1、问题提出

2、解决方案

整篇文章将通过实例讲述ECharts的基本使用

官网：快速上手 - Handbook - Apache ECharts

一、使用前提

1、安装

npm install echarts --save

2、创建文件

（1）在views文件夹下=》创建echarts=》创建LineView.vue文件

（2）在views文件夹下=》创建IndexView.vue【用于所有图片的展示】

二、LineView.vue文件【相当于一个组件】

1、导入

//5.0以上版本
import * as echarts from 'echarts'
//5.0以下
import  echarts from 'echarts'

2、methods方法下写init(){}方法进行选择

（1）获取dom元素

const dom = document.getElementById('')

（2）初始化表

this.chart = echarts.init(dom)

（3）配置项单独封装出去

this.setOptions()

3、methods方法下写setOptioin(option)

（1）option的定义

const option = {xAxis: {type: "category",data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],},yAxis: {type: "value",},series: [{data: [150, 230, 224, 218, 135, 147, 260],type: "line",},],
};

（2）option的作用

//作用：保证两样都有执行
option && this.chart.setOption(option)

4、init()函数调用

属于dom渲染，根据生命周期，要在mounted()调用

mounted() {this.init()
},

5、整合完整代码

<template><div><div id="line"></div></div>
</template><script>
import * as echarts from "echarts";export default {name: "LineView",data() {return {};},mounted() {this.init();},methods: {init() {// 获取dom元素var dom = document.getElementById("line");// 初始化表this.chart = echarts.init(dom);// 设置配置项this.setOptions();},setOptions() {const option = {xAxis: {type: "category",data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],},yAxis: {type: "value",},series: [{data: [150, 230, 224, 218, 135, 147, 260],type: "line",},],};option && this.chart.setOption(option);},},
};
</script><style lang="scss" scoped>
#line {width: 500px;height: 500px;
}
</style>

三、IndexView.vue文件【实现组件引入显示】

1、引入

import lineView from './echarts/lineView.vue';

2、注册

components:{lineView
},

3、显示

<div class="index"><!-- 折线图 --><div class="line"><lineView></lineView></div>
</div>
.index {width: 100%;height: 100%;.line {width: 500px;height: 500px;}
}

四、数据操作

1、series系列

（1）折线图、柱状图

series: [{data: [150, 230, 224, 218, 135, 147, 260],//数据type: "line",//折线图smooth: true,//平滑},{data: [50, 30, 24, 18, 35, 147, 260],type: "line",//折线图},{data: [150, 230, 224, 218, 135, 147, 260],type: "bar",//柱状图},
],

（2）饼图

IndexView.vue

<template><div><div class="index"><!-- 折线图 --><div class="line"><lineView></lineView></div><!-- 饼图 --><div class="pie"><pieView></pieView></div></div></div>
</template><script>
import lineView from "./echarts/lineView.vue";
import pieView from "./echarts/PieView.vue";export default {name: "IndexView",components: {lineView,pieView,},data() {return {};},mounted() {},methods: {},
};
</script><style lang="scss" scoped>
.index {width: 100%;height: 100%;display: flex;.line {width: 500px;height: 500px;}.pie {width: 500px;height: 500px;}
}
</style>

PieView.vue

<template><div><div id="PiePage"></div></div>
</template><script>
import * as echarts from "echarts";export default {name: "PieView",data() {return {};},mounted() {this.init();},methods: {init() {// 获取dom元素var dom = document.getElementById("PiePage");// 初始化表this.chart = echarts.init(dom);// 设置配置项this.setOptions();},setOptions() {const option = {title: {text: "饼状图",subtext: "Fake Data",left: "center",},tooltip: {trigger: "item",},legend: {orient: "vertical",left: "left",},series: [{name: "Access From",type: "pie",radius: '50%', //饼状大小data: [//数据{ value: 1048, name: "Search Engine" },{ value: 735, name: "Direct" },{ value: 580, name: "Email" },{ value: 484, name: "Union Ads" },{ value: 300, name: "Video Ads" },],emphasis: {//高亮状态itemStyle: {//样式shadowBlur: 10,shadowOffsetX: 0,shadowColor: "rgba(0, 0, 0, 0.5)",},},},],};option && this.chart.setOption(option);},},
};
</script><style lang="scss" scoped>
#PiePage {width: 500px;height: 500px;
}
</style>

①通过radius指定外半径、内半径

series: [{name: "Access From",type: "pie",radius: ['20%','50%'],//[内半径, 外半径]data: [{ value: 1048, name: "Search Engine" },{ value: 735, name: "Direct" },{ value: 580, name: "Email" },{ value: 484, name: "Union Ads" },{ value: 300, name: "Video Ads" },],emphasis: {itemStyle: {shadowBlur: 10,shadowOffsetX: 0,shadowColor: "rgba(0, 0, 0, 0.5)",},},},
],

②文本标签

const option = {title: {text: "饼状图",subtext: "Fake Data",left: "center",},tooltip: {trigger: "item",},legend: {orient: "vertical",left: "left",},series: [{name: "Access From",type: "pie",radius: ["20%", "50%"], //[内半径, 外半径]data: [//数据{ value: 1048, name: "Search Engine" },{ value: 735, name: "Direct" },{ value: 580, name: "Email" },{ value: 484, name: "Union Ads" },{ value: 300, name: "Video Ads" },],label:{show:true,position:'center'},emphasis: {//高亮状态itemStyle: {//样式shadowBlur: 10,shadowOffsetX: 0,shadowColor: "rgba(0, 0, 0, 0.5)",},},},],
};

③emphasis高亮状态

const option = {title: {text: "饼状图",subtext: "Fake Data",left: "center",},tooltip: {trigger: "item",},legend: {orient: "vertical",left: "left",},series: [{name: "Access From",type: "pie",radius: ["20%", "50%"], //[内半径, 外半径]data: [//数据{ value: 1048, name: "Search Engine" },{ value: 735, name: "Direct" },{ value: 580, name: "Email" },{ value: 484, name: "Union Ads" },{ value: 300, name: "Video Ads" },],label:{show:false,position:'center'},//高亮状态emphasis: {//文字样式label:{show:true,fontSize:20,fontWeight:'bold'},//样式itemStyle: {shadowBlur: 10,shadowOffsetX: 0,shadowColor: "rgba(0, 0, 0, 0.5)",},},},],
};

2、title标题

const option = {title:{text:'统计图',link:'https://www.baidu.com/',//跳转路径target:'blank',//在新页面打开textStyle:{color:"blue",fontSize:'26',fontWeight:"bold",},left:'center',},xAxis: {type: "category",data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],},yAxis: {type: "value",},series: [{data: [150, 230, 224, 218, 135, 147, 260],type: "line", //折线图},{data: [50, 30, 24, 18, 35, 147, 260],type: "line", //折线图},{data: [150, 230, 224, 218, 135, 147, 260],type: "bar", //柱状图},],
};

3、legend图例

const option = {title:{text:'统计图',link:'https://www.baidu.com/',//跳转路径target:'blank',//在新页面打开textStyle:{color:"blue",fontSize:'26',fontWeight:"bold",},left:'center',},legend: {data: ['1', '2', '3'],//对应的系列left:'right',},xAxis: {type: "category",data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],},yAxis: {type: "value",},series: [{name:'1',//对应图例data: [150, 230, 224, 218, 135, 147, 260],type: "line", //折线图},{name:'2',data: [50, 30, 24, 18, 35, 147, 260],type: "line", //折线图},{name:'3',data: [150, 230, 224, 218, 135, 147, 260],type: "bar", //柱状图},],
};

4、tooltip提示框

const option = {title:{text:'统计图',link:'https://www.baidu.com/',//跳转路径target:'blank',//在新页面打开textStyle:{color:"blue",fontSize:'26',fontWeight:"bold",},left:'center',},legend: {data: ['1', '2', '3'],//对应的系列left:'right',},tooltip:{show:true,//展示trigger:'axis',//同时显示三种数据，方便对比},xAxis: {type: "category",data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],},yAxis: {type: "value",},series: [{name:'1',//对应图例data: [150, 230, 224, 218, 135, 147, 260],type: "line", //折线图},{name:'2',data: [50, 30, 24, 18, 35, 147, 260],type: "line", //折线图},{name:'3',data: [150, 230, 224, 218, 135, 147, 260],type: "bar", //柱状图},],
};

五、地图

1、前期准备

（1）获取JSON格式地图信息文档

DataV.GeoAtlas地理小工具系列由阿里云DataV数据可视化团队出品，多年深耕数据可视化领域，数据大屏业务开拓者和领航者。致力用震撼而清晰的视觉语言，让更多人读懂大数据，受惠数据驱动的决策方式。icon-default.png?t=N7T8http://datav.aliyun.com/portal/school/atlas/area_selector?spm=a2crr.23498931.0.0.29b915ddWQjcfk（2）下载需要的数据，小编以福建省为例子

（3）放入静态文件夹assets中

（4）引入、注册地图

<template><div><div id="MapPage"></div></div>
</template><script>
import * as echarts from 'echarts';
// 引入
import map from "@/assets/福建省.json";export default {name: 'ThreeTwoMapView',data() {return {};},mounted() {},methods: {init(){const dom = document.getElementById('MapPage')this.chart = echarts.init(dom)// 注册地图echarts.registerMap('Fujian',map)// 设置配置项this.setOption()},setOption(){const option = {}option && this.chart.setOption(option);}},
};
</script><style lang="scss" scoped>
#MapPage{width: 500px;height: 500px;
}
</style>

2、设置配置项

setOption(){const option = {series:[{name:'福建省',type:"map",map:'Fujian',}]}option && this.chart.setOption(option);
}

（1）roam鼠标拖拽缩放、偏移

const option = {series:[{name:'福建省',type:"map",map:'Fujian',roam:true,}]
}

（2）scaleLimit缩放限制

const option = {series: [{name: "福建省",type: "map",map: "Fujian",roam: true,//是否可缩放、偏移zoom:0.5,//初始缩放比例scaleLimit:{//缩放限制min:0.5,max:10,}},],
};

（3）itemStyle图形样式

const option = {series: [{name: "福建省",type: "map",map: "Fujian",roam: true,//是否可缩放、偏移zoom:0.5,//初始缩放比例scaleLimit:{//缩放限制min:0.5,max:10,},// 文本标签label:{show:true,color:"#0000ff"},// 图形样式itemStyle:{areaColor:"#00ffff",//区域颜色borderColor:'black',//描边颜色shadowColor:'rgba(0,0,0,0.5)',//阴影颜色shadowBlur:10,//阴影的模糊大小}},],
};

（4）emphasis高亮

const option = {series: [{name: "福建省",type: "map",map: "Fujian",roam: true,//是否可缩放、偏移zoom:0.5,//初始缩放比例scaleLimit:{//缩放限制min:0.5,max:10,},// 文本标签label:{show:true,color:"#0000ff"},// 图形样式itemStyle:{areaColor:"#00ffff",//区域颜色borderColor:'black',//描边颜色shadowColor:'rgba(255,0,0,0.5)',//阴影颜色shadowBlur:10,//阴影的模糊大小},// 高亮emphasis:{label:{show:true,color:'#fff'},// 图形样式itemStyle:{areaColor:"#000",//区域颜色borderColor:'black',//描边颜色},}},],
};

（5）选中

// 选中
select:{label:{show:true,color:'#fff'},// 图形样式itemStyle:{areaColor:"#0f0",//区域颜色borderColor:'black',//描边颜色},
},

3、点击事件

init() {const dom = document.getElementById("MapPage");this.chart = echarts.init(dom);// 注册地图echarts.registerMap("Fujian", map);// 点击this.chart.on("click", (params) => {console.log(params);});// 设置配置项this.setOption();
},

六、动态数据渲染

1、问题提出

当data数据是动态的，在created的dom还没有渲染时，异步获取数据，发现图并不能绘制成功

export default {name: "LineView",data() {return {arr:[],//动态数据};},created(){// dom还没有渲染this.arrApi()},mounted() {this.init();}, methods: {init() {// 获取dom元素var dom = document.getElementById("line");// 初始化表this.chart = echarts.init(dom);// 设置配置项this.setOptions();},setOptions() {const option = {title: {text: "统计图",link: "https://www.baidu.com/", //跳转路径target: "blank", //在新页面打开textStyle: {color: "blue",fontSize: "26",fontWeight: "bold",},left: "center",},legend: {data: ["1", "2", "3"], //对应的系列left: "right",},tooltip: {show: true, //展示trigger: "axis", //同时显示三种数据，方便对比},xAxis: {type: "category",data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],},yAxis: {type: "value",},series: [{name: "1", //对应图例data: this.arr,type: "line", //折线图},],};option && this.chart.setOption(option);},// 模拟异步请求获取数据arrApi(){setTimeout(()=>{this.arr = [50, 30, 24, 18, 35, 147, 260]})}},
};

2、解决方案

监听数据变化时，再次绘制即可

// 监听数据变化
watch:{arr:{handler(newV,oldV){console.log(newV,oldV);this.setOptions()//再次调用配置项}}
},


http://www.ppmy.cn/news/1155416.html

相关文章

【机器学习】集成学习(以随机森林为例)

【机器学习】集成学习(以随机森林为例)

文章目录 集成学习随机森林随机森林回归填补缺失值实例&#xff1a;随机森林在乳腺癌数据上的调参附录参数 集成学习 集成学习&#xff08;ensemble learning&#xff09;是时下非常流行的机器学习算法&#xff0c;它本身不是一个单独的机器学习算法&#xff0c;而是通过在数据…
阅读更多...
PyQt界面里如何加载本地视频以及调用摄像头实时检测（小白入门必看）

PyQt界面里如何加载本地视频以及调用摄像头实时检测（小白入门必看）

目录 1.PyQt介绍 2.代码实现 2.1实时调用摄像头 2.2 使用YOLOv5推理 2.3 代码中用到的主要函数 1.PyQt介绍 PyQt是一个用于创建桌面应用程序的Python绑定库&#xff0c;它基于Qt框架。Qt是一个跨平台的C应用程序开发框架&#xff0c;提供了丰富的图形界面、网络通信、数据…
阅读更多...
产品经理如何有效跟进开发进度？

产品经理如何有效跟进开发进度？

作为产品经理&#xff0c;很难跟进开发过程。随着软件开发的复杂性和不断变化的产品环境&#xff0c;产品经理必须保持在开发过程的顶端&#xff0c;并确保目标得到满足。产品经理如何跟进开发进度&#xff1f; 第一步是对开发过程本身有一个扎实的理解。产品经理必须熟悉开发过…
阅读更多...
使用Node编写简单的接口实现前后端交互

使用Node编写简单的接口实现前后端交互

目录 前言 下载安装Node.js 创建最基本的web服务器 nodemon 模块化路由Router 回到开始创建的web服务器中注册路由模块 编写GET接口 编写POST请求 获取req.body中的数据 前端页面 axios 发起GET请求 发起POST请求 跨域问题 在Node中解决跨域 前言 本文介绍如何使…
阅读更多...
什么是js？（初步了解）

什么是js？（初步了解）

Javascript简称js,js是一种脚本语言,是不需要进行编译的,也是浏览器中的一部分,经常用在web客户端脚本语言,主要是用来给html增加动态功能。 而现在&#xff0c;由于Node.js的出现&#xff0c;JavaScript以及不局限与浏览器&#xff0c;用户也可以在服务端进行代码的编写&#…
阅读更多...
力扣-434.字符串中的单词数

力扣-434.字符串中的单词数

Idea 利用C中的 stringstream 指定字符分割字符串 class Solution { public:int countSegments(string s) {int cnt 0;stringstream ss(s);string word;while(ss >> word){cnt;}return cnt;} };
阅读更多...
C++面试题目汇总

C++面试题目汇总

面试题目汇总 C基础1. 面向对象是什么&#xff1f;[GPT]2. 面向对象的三大特征是什么&#xff1f;[GPT]3. 重载和重写的区别&#xff1f;[GPT]4. 构造函数的类别有哪些&#xff1f;[GPT]5. 定义一个空类时&#xff0c;默认生成哪些函数&#xff1f;[GPT]6. 向下转型和向上转型是…
阅读更多...
【Unity实战100例】Unity内部软键盘输入制作

【Unity实战100例】Unity内部软键盘输入制作

目录 一. 样式颜色设置 二. UI逻辑 源码地址： 哔哩哔哩工房 一. 样式颜色设置 可以在预制体上提前设置一下对应组件的颜色，包括按键边框的颜色，内部填充色，普通按键文本颜色，功能按键文本颜色，大家可以根据自己的需求处理按钮逻辑。
阅读更多...
最新文章

Copyright @ 2022~2023