vue+echarts绘制折线图、柱状图和扇形图教程
更新时间：2023年03月27日 16:30:15 作者：JeffreytheCoder
这篇文章主要介绍了vue+echarts绘制折线图、柱状图和扇形图教程，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
前端时间在前端岗位上要实现Vue项目中的echarts画图，今天来分享下vue+echarts折线图、柱状图和扇形图的方法。
每种图的echarts配置差不多一致，但根据图种需进行指定选项的改动。
一、折线图
折线图中，series要包含每条折线的数据。
<template>
<div id="myChart"></div>
</template>
<script>
import echarts from 'echarts' // 引入echarts
export default {
name: 'LineChart',
data () {
return {
echartsOption: { // echarts选项，所有绘图数据和样式都在这里设置
legend: { //图表上方的图例
data: ['腾讯', '阿里巴巴', '华为', '字节跳动']
},
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'], // x轴数据
name: '日期', // x轴名称
nameTextStyle: { // x轴名称样式
fontWeight: 600,
fontSize: 18
}
},
yAxis: {
type: 'value',
name: '市值', // y轴名称
nameTextStyle: { // y轴名称样式
fontWeight: 600,
fontSize: 18
}
},
tooltip: { //鼠标放到图上的数据展示样式
trigger: 'axis'
},
series: [ //每条折线的数据系列
{
name: '腾讯',
data: [820, 932, 901, 934, 1290, 1330, 1320],
type: 'line'
},
{
name: '阿里巴巴',
data: [620, 711, 823, 934, 1445, 1456, 1178],
type: 'line'
},
{
name: '华为',
data: [612, 920, 1140, 1160, 1190, 1234, 1321],
type: 'line'
},
{
name: '字节跳动',
data: [234, 320, 453, 567, 789, 999, 1200],
type: 'line'
}
],
}
}
},
mounted () {
let myChart = echarts.init(document.getElementById('myChart'), 'light') // 初始化echarts, theme为light
myChart.setOption(this.echartsOption) // echarts设置选项
}
}
</script>
<style>
#myChart{
width: 100%;
height: 500px;
margin: 0 auto;
margin-top: 5%;
}
</style>
效果图
二、柱状图
柱状图中，要在series加入每个bar的数据。
<template>
<div id="myChart"></div>
</template>
<script>
import echarts from 'echarts' // 引入echarts
export default {
name: 'LineChart',
data () {
return {
echartsOption: { // echarts选项，所有绘图数据和样式都在这里设置
xAxis: {
type: 'category',
data: ['腾讯', '阿里巴巴', '华为', '字节跳动'], // x轴数据
name: '日期', // x轴名称
nameTextStyle: { // x轴名称样式
fontWeight: 600,
fontSize: 18
}
},
yAxis: {
type: 'value',
name: '公司盈利率', // y轴名称
nameTextStyle: { // y轴名称样式
fontWeight: 600,
fontSize: 18
}
},
tooltip: { //鼠标放到图上的数据展示样式
trigger: 'axis'
},
series: [{ //series中加入每个bar的数据
name: '公司盈利率',
type: 'bar',
barWidth: '60%',
data: [0.35, 0.2, 0.25, 0.15],
}],
}
}
},
mounted () {
let myChart = echarts.init(document.getElementById('myChart'), 'light') // 初始化echarts, theme为light
myChart.setOption(this.echartsOption) // echarts设置选项
}
}
</script>
<style>
#myChart{
width: 100%;
height: 500px;
margin: 0 auto;
margin-top: 5%;
}
</style>
效果图
三、扇形图
扇形图中不需要xAxis和yAxis，一个series的data加入每个类别的数据，格式为 {value, name}。
<template>
<div id="myChart"></div>
</template>
<script>
import echarts from 'echarts' // 引入echarts
export default {
name: 'PieChart',
data () {
return {
echartsOption: { // echarts选项，所有绘图数据和样式都在这里设置
legend: { //图表上方的图例
data: ['腾讯', '阿里巴巴', '华为', '字节跳动']
},
tooltip: { //鼠标放到图上的数据展示样式
trigger: 'axis'
},
series: [{
name: '公司市值占比',
type: 'pie',
barWidth: '60%',
data: [ // 扇形图数据格式： {value, name}
{value: 0.35, name: '腾讯'}, // value不一定是比例，echarts会自动转换
{value: 0.2, name: '阿里巴巴'},
{value: 0.25, name: '华为'},
{value: 0.2, name: '字节跳动'},
],
}],
}
}
},
mounted () {
let myChart = echarts.init(document.getElementById('myChart'), 'light') // 初始化echarts, theme为light
myChart.setOption(this.echartsOption) // echarts设置选项
}
}
</script>
<style>
#myChart{
width: 100%;
height: 500px;
margin: 0 auto;
margin-top: 5%;
}
</style>
效果图
这样就绘制出简单的echarts图啦！
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了vue中关于@media媒体查询的使用，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-08-08
这篇文章主要Vue使用Axios拦截器，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-04-04
这篇文章主要为大家详细介绍了vue如何使用echarts实现动态数据,文中的示例讲解详细,具有一定的借鉴价值,感兴趣的小伙伴可以跟随小编一起学习一下2023-11-11
传统的表单开发通常需要编写大量的重复代码,例如处理用户输入、验证数据、更新 UI 等等,为了简化开发,我们可以借助 Vue 3 的新特性,例如组合式 API 和 ref 对象,所以本文我们将一起学习如何使用 Vue 3 的新特性构建一个更加灵活、可扩展的动态表单2024-06-06
本文主要介绍了react里组件通信的几种方式小结,包含了5种方式,主要是props传递,回调函数作为props,Context,Redux或MobX,refs,具有一定的参考价值,感兴趣的可以了解一下2024-06-06
本节，我们将讨论关于AST的转换。所谓AST的转换，指的是对AST进行一系列操作，将其转换为新的AST的过程。新的AST可以是原语言或原DSL的描述，也可以是其他语言或其他DSL的描述。例如，我们可以对模板AST进行操作，将其转换为JavaScriptAST2023-01-01
axios 是一个基于promise用于浏览器和 nodejs 的 HTTP 客户端，这篇文章主要介绍了Vue中axios的基本用法及axios的特征和使用注意细节，本文通过示例代码给大家介绍的非常详细,需要的朋友可以参考下2022-07-07
最近有一个需求是很多个表单添加,编辑等操作,会用到很多input输入框,所以就想把input进行简单封装,这篇文章主要给大家介绍了关于vue3简单封装input组件和统一表单数据的相关资料,需要的朋友可以参考下2022-05-05
这篇文章主要介绍了详解vue+webpack+express中间件接口使用，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-07-07
这篇文章主要介绍了使用vue实现简单键盘的示例(支持移动端和pc端)，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-12-12
最新评论