您好,登录后才能下订单哦!
密码登录
登录注册
点击 登录注册 即表示同意《亿速云用户服务条款》
这篇“怎么使用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>
效果图
柱状图中,要在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+echarts绘制折线图、柱状图和扇形图”这篇文章的内容,相信大家都有了一定的了解,希望小编分享的内容对大家有帮助,若想了解更多相关的知识内容,请关注亿速云行业资讯频道。
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。