ECharts图表详解
v-echart地址
按需引用
<ve-histogram :data="chartData"></ve-histogram>
===js===
import VeHistogram from 'v-charts/lib/histogram.common'
components: {
VeHistogram,
},
data() {
return {
chartData: {
columns: ['日期', '参加上课的学生人数', '完成上课签到的学生人数'],
rows: [
{ '日期': '2020-8-4', '参加上课的学生人数': 1393, '完成上课签到的学生人数': 1093 },
{ '日期': '2020-8-5', '参加上课的学生人数': 3530, '完成上课签到的学生人数': 3230 },
{ '日期': '2020-8-6', '参加上课的学生人数': 2923, '完成上课签到的学生人数': 2623 },
{ '日期': '2020-8-7', '参加上课的学生人数': 1723, '完成上课签到的学生人数': 1423 },
{ '日期': '2020-8-8', '参加上课的学生人数': 3792, '完成上课签到的学生人数': 3492 },
{ '日期': '2020-8-9', '参加上课的学生人数': 4593, '完成上课签到的学生人数': 4293 },
{ '日期': '2020-8-10', '参加上课的学生人数': 1393, '完成上课签到的学生人数': 1093 },
{ '日期': '2020-8-11', '参加上课的学生人数': 3530, '完成上课签到的学生人数': 3230 },
{ '日期': '2020-8-12', '参加上课的学生人数': 2923, '完成上课签到的学生人数': 2623 },
{ '日期': '2020-8-13', '参加上课的学生人数': 1723, '完成上课签到的学生人数': 1423 },
{ '日期': '2020-8-14', '参加上课的学生人数': 3792, '完成上课签到的学生人数': 3492 },
{ '日期': '2020-8-15', '参加上课的学生人数': 4593, '完成上课签到的学生人数': 4293 }
]
}
}
npm安装eCharts npm install echarts -S
在需要用图表的地方引入import echarts from 'echarts'
或在main.js中import echarts from 'echarts'和 Vue.prototype.$echarts = echarts
属性：
type:图形类型
name：系列名称，用于tooltip的显示，legend的图例筛选，在 setOption 更新数据和配置项时用于指定对应的系列。
xAxisIndex:使用x轴的index,在单个图表实例中存在多个x轴的时候用
yAxisIndex:使用y轴的index,在单个图表实例中存在多个y轴的时候用
symbol:标记的图形，ECharts 提供的标记类型包括 ‘circle’, ‘rect’, ‘roundRect’, ‘triangle’, ‘diamond’, ‘pin’, ‘arrow’, ‘none’
可以通过 'image://url' 设置为图片，其中 URL 为图片的链接，或者dataURI。
URL 为图片链接例如：'image://http://xxx.xxx.xxx/a/b.png'
symbolSize:标记的大小，可以设置成诸如 10 这样单一的数字，也可以用数组分开表示宽和高，例如 [20, 10] 表示标记宽为20，高为10
x轴字体过多时，显示不全
解决方法：
axisLabel: {
interval:0,
rotate:50, //旋转一定角度
}
条形图图形颜色不同
设置
itemStyle: {
normal: {
color: function(params){
var colorList=[
'#55A8FD','#5FDAC7','#FA7D7D','#AEB3B8','#92C789','#6A6A6A'
]
return colorList[params.dataIndex]
}
},
折线图和柱形图
<template>
<div class="HelloWorld">
<!-- 条形图和折线图 -->
<div class="title">我的销售量</div>
<div id="myLine">
</div>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
data(){
return{ }
},
//echarts初始化应在钩子函数mounted()中，挂载之后调用
mounted(){
this.draw();
},
methods: {
//折线图和柱状图
draw(){
let myLine = this.$echarts.init(document.getElementById('myLine'))
var option = {
title:{
text:'销售量',
//全局字体样式
textStyle:{
// color:'#878787',
// fontSize:'20px'
fontWeight:400
}
},
//提示框组件
tooltip: {
//show 是否显示提示框组件，包括提示框浮层和 axisPointer
show:true,
//trigger 触发类型，item数据项图形触发，主要在散点图、饼图等无类目轴的图表中使用，axis坐标轴触发，none什么都不触发
trigger: 'axis'
},
//工具栏。内置有导出图片，数据视图，动态类型切换，数据区域缩放，重置五个工具。
toolbox: {
show : true, //显示
//柱形图和折线图切换
feature : {
magicType : {show: true, type: ['line', 'bar']},
},
right: '6%', //离右边的距离
},
//图例组件
legend: {
data:[{
name:'销量',
left:'25%',
top:'12px',
itemWidth:10, //图例图标的宽
itemHeight:10, //图例图标的高
textStyle:{
color:'#3a6186',
fontSize:'20px'
}},{
name:'进货量',
left:'30%',
top:'12px',
itemWidth:10, //图例图标的宽
itemHeight:10, //图例图标的高
textStyle:{
color:'skyblue',
fontSize:'20px'
}
}]
},
//横坐标
xAxis: {
type:'category',
data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"],
splitLine: {show: false},//去除网格分割线
// splitArea: {show: true},//保留网格区域
axisLine: {//坐标线
lineStyle: {
type: 'solid',
color: '#d8d8d8',//轴线的颜色
width:'1'//坐标线的宽度
}
},
axisTick: {//刻度
show: false//不显示刻度线
},
axisLabel: {
textStyle: {
color: '#878787',//坐标值的具体的颜色
}
},
// splitLine: {
// show: false//去掉分割线
// }
},
//纵坐标
yAxis: {
name: '单位：件',//轴的名字，默认位置在y轴上方显示,也可不写
max: 100,//最大刻度
type: 'value',
axisLine: { //y轴线
show: true
},
axisTick: { //y轴上的刻度
show: true
},
axisLabel: {
textStyle: {
color: '#878787',//坐标值得具体的颜色
}
},
minInterval: 5,//标值的最小间隔
splitLine: {
lineStyle: {
color: ['#f6f6f6'],//分割线的颜色
}
}
},
series: [{
name: '销量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20],
itemStyle: {
normal: {
color: '#FD6B71',//设置柱子颜色
label: {
show: true,//柱子上显示值
position: 'top',//值在柱子上方显示
textStyle: {
color: '#FD6B71'//值得颜色
}
}
}
},
barWidth: 15//设置柱子宽度，单位为px
},{
name: '进货量',
type: 'bar',
data: [15, 25, 65, 100, 20, 10],
itemStyle: {
normal: {
color: 'skyblue',//设置柱子颜色
label: {
show: true,//柱子上显示值
position: 'top',//值在柱子上方显示
textStyle: {
color: '#FD6B71'//值得颜色
}
}
}
},
barWidth: 15//设置柱子宽度，单位为px
}]
}
// 防止越界，重绘canvas ,解决掉屏幕缩小，图表不会随之适应的缩小的方法，
//原理为当浏览器发生resize事件的时候，让其触发echart的resize事件，重绘canvas
//resize事件:当调整浏览器窗口大小时会触发此事件。
window.onresize = myLine.resize;
//设置option
myLine.setOption(option);
}
}
}
</script>
<style lang="less" scoped>
.HelloWorld{
.title{
font-size: 20px;
font-weight: 600;
color: blue;
margin-bottom: 20px;
}
#myLine{
width: 600px;
height: 400px;
}
#Line{
width: 600px;
height: 400px;
}
}
</style>
防止越界，重绘canvas ,解决掉屏幕缩小，图表不会随之适应的缩小的方法，原理为当浏览器发生resize事件的时候，让其触发echart的resize事件，重绘canvas
resize事件:当调整浏览器窗口大小时会触发此事件。window.onresize = myLine.resize;
折线图
<template>
<div class="lineCharts">
<p class="title">折线图</p>
<div id="myLineOne">
</div>
</div>
</template>
<script>
import echarts from 'echarts'
export default {
name:'lineCharts',
data(){
return{ }
},
mounted(){
this.draw('myLineOne');
},
methods:{
draw(id){
this.charts=echarts.init(document.getElementById(id));
this.charts.setOption({
title:{
text:'日温差',
//全局字体样式
textStyle:{
fontWeight:400
}
},
//提示框组件
tooltip: {
trigger: 'axis'
},
legend: {
data:[{
name:'日温差',
left:'25%',
top:'12px',
textStyle:{
color:'#3a6186',
fontSize:'20px'
}
},{
name:'前一天温度',
left:'30%',
top:'12px',
textStyle:{
color:'skyblue',
fontSize:'20px'
}
}]
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
toolbox: {
feature: {
saveAsImage: {show: true, type: ['line']}
}
},
xAxis: {
type: 'category',
//坐标轴两边留白
boundaryGap: true,
data: ["2:00","4:00","6:00","8:00","10:00","12:00","14:00","16:00","18:00","20:00","22:00","24:00"]
},
yAxis: {
name: '单位：摄氏度',//轴的名字，默认位置在y轴上方显示,也可不写
max: 25,//最大刻度
type: 'value',
axisLine: {
show: true
},
axisTick: {//刻度
show: true
},
axisLabel: {
textStyle: {
color: '#878787',//坐标值得具体的颜色
}
},
minInterval:1,//标值的最小间隔
splitLine: {
lineStyle: {
color: ['#f6f6f6'],//分割线的颜色
}
}
},
series: [{
name: '日温差',
type: 'line',
data: [2,3,2,4,11,17,16,12,10,7,5,1],
itemStyle: {
normal: {
color: '#FD6B71',//设置柱子颜色
label: {
show: true,//柱子上显示值
position: 'top',//值在柱子上方显示
textStyle: {
color: '#FD6B71'//值得颜色
}
}
}
}
},{
name: '前一天温度',
type: 'line',
data: [1,4,3,4,16,21,22,10,10,5,3,1],
itemStyle: {
normal: {
color: 'skyblue',
label: {
show: true,
position: 'top',
textStyle: {
color: '#FD6B71'
}
}
}
}
} ]
})
}
}
}
</script>
<style lang="less" scoped>
.lineCharts{
.title{
font-size: 20px;
font-weight: 600;
color: blue;
margin-bottom: 20px;
}
#myLineOne{
width: 600px;
height: 400px;
}
}
</style>
散点图
<template>
<div class="scatter_diagram">
<p class="title">散点图</p>
<div id="scatter">
</div>
</div>
</template>
<script>
import echarts from 'echarts'
export default {
data(){
return{
}
},
mounted(){
this.draw();
},
methods:{
draw(){
let myChart = echarts.init(document.getElementById('scatter'));
myChart.setOption({
xAxis: {
name:'单位：米'
},
yAxis: {
name:'单位：米'
},
series: [{
symbol:'rect', //标记的形状
// symbol:url('./images/star.jpg'),
symbolSize: 20, //标记的大小（气泡的大小）
data: [
[10.0, 8.04],
[8.0, 6.95],
[13.0, 7.58],
[9.0, 8.81],
[11.0, 8.33],
[14.0, 9.96],
[6.0, 7.24],
[4.0, 4.26],
[12.0, 10.84],
[7.0, 4.82],
[5.0, 5.68]
],
type: 'scatter' //类型为散点图
}]
})
}
}
}
</script>
<style lang="less" scoped>
.scatter_diagram{
.title{
font-size: 20px;
font-weight: 600;
color: blue;
margin-bottom: 20px;
}
#scatter{
width: 620px;
height: 400px;
}
}
</style>
饼图
<template>
<div class="pie">
<p class="title">饼图</p>
<div id="myPie">
</div>
</div>
</template>
<script>
import echarts from 'echarts'
export default {
data(){
return{ }
},
mounted(){
this.draw();
},
methods:{
draw(){
//基于准备好的dom,初始化echarts实例
let myChart = echarts.init(document.getElementById('myPie'));
//绘制图表
myChart.setOption({
title : {
text: '江西**大学', //主标题
subtext: '问卷——上课是否经常玩手机', //副标题
x:'center', //x轴方向对齐方式
},
tooltip : {
trigger: 'item',
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
legend: {
orient: 'vertical',
bottom: 'bottom',
data: ['基本都在玩手机','经常','一般','偶尔','基本不玩']
},
series : [
{
name: '问卷',
type: 'pie',
radius : '55%',
center: ['50%', '60%'],
data:[
{value:335, name:'基本都在玩手机'},
{value:310, name:'经常'},
{value:234, name:'一般'},
{value:135, name:'偶尔'},
{value:148, name:'基本不玩'}
],
//图形的颜色，默认从全局调色盘 option.color 获取颜色
itemStyle: {
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
})
}
}
}
</script>
<style lang="less" scoped>
.pie{
.title{
font-size: 20px;
font-weight: 600;
color: blue;
margin-bottom: 20px;
}
#myPie{
width: 600px;
height: 400px;
}
}
</style>
漏斗图
<template>
<div class="funnels">
<p>漏斗图</p>
<div id="myFunnels"></div>
</div>
</template>
<script>
import echarts from 'echarts'
export default {
data(){
return{
}
},
mounted(){
this.draw();
},
methods:{
draw(){
//基于准备好的dom,初始化echarts实例
let myChart = echarts.init(document.getElementById('myFunnels'));
//绘制图表
myChart.setOption({
title: {
text: '漏斗图',
subtext: '纯属虚构'
},
tooltip: {
trigger: 'item',
formatter: "{a} <br/>{b} : {c}%"
},
toolbox: {
feature: {
dataView: {readOnly: false},
restore: {},
saveAsImage: {}
}
},
legend: {
data: ['展现','点击','访问','咨询','订单']
},
series: [
{
data: [
{value: 60, name: '访问'},
{value: 40, name: '咨询'},
{value: 20, name: '订单'},
{value: 80, name: '点击'},
{value: 100, name: '展现'}
],
name:'漏斗图',
type:'funnel',
left: '10%',
top: 60,
//x2: 80,
bottom: 60,
width: '80%',
// height: {totalHeight} - y - y2,
min: 0,
max: 100,
minSize: '0%',
maxSize: '100%',
sort: 'descending',
gap: 2,
label: {
show: true,
position: 'inside'
},
labelLine: {
length: 10,
lineStyle: {
width: 1,
type: 'solid'
}
},
itemStyle: {
borderColor: '#fff',
borderWidth: 1
},
emphasis: {
label: {
fontSize: 20
}
},
}
]
})
}
}
}
</script>
<style >
#myFunnels{
width: 600px;
height: 400px;
}
</style>
扫一扫
1811
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
