怎么使用vue+echarts绘制折线图、柱状图和扇形图

发布时间:2023-05-10 17:38:55 作者:iii
来源:亿速云 阅读:297

这篇“怎么使用vue+echarts绘制折线图、柱状图和扇形图”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“怎么使用vue+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>

效果图

怎么使用vue+echarts绘制折线图、柱状图和扇形图

二、柱状图

柱状图中,要在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>

效果图

怎么使用vue+echarts绘制折线图、柱状图和扇形图

三、扇形图

扇形图中不需要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>

效果图

怎么使用vue+echarts绘制折线图、柱状图和扇形图

这样就绘制出简单的echarts图啦!

以上就是关于“怎么使用vue+echarts绘制折线图、柱状图和扇形图”这篇文章的内容,相信大家都有了一定的了解,希望小编分享的内容对大家有帮助,若想了解更多相关的知识内容,请关注亿速云行业资讯频道。

推荐阅读:
  1. Vue中使用可视化图表echarts的方法
  2. 如何把echarts的图表贴在three.js模型

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

echarts vue

上一篇:Redis与MySQL的双写一致性问题怎么解决

下一篇:怎么使用JS实现一个跟随鼠标移动洒落的星星特效

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》