![cover](https://img-blog.csdnimg.cn/20210721111515777.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1N1bnNoaW5lX0ppYW4=,size_16,color_FFFFFF,t_70)
Vue——Echarts实现折线图
一、在项目里安装npm install echarts -S二、新建test.vue<template><divid="test_app"><!--为echarts准备一个具备大小的容器dom--><divid="main"style="width:100%;height:520px;background:#fff"></div><
·
一、在项目里安装
npm install echarts -S
二、新建test.vue
<template>
<div id="test_app">
<!--为echarts准备一个具备大小的容器dom-->
<div id="main" style="width: 100%;height: 520px;background:#fff"></div>
</div>
</template>
三、引入echarts
为解决报错:
import * as echarts from 'echarts';
或
const echarts = require('echarts');
<script>
import * as echarts from 'echarts'
</script>
四、代码
<template>
<div id="test_app">
<!--echarts的容器-->
<div id="main" style="width: 100%;height: 520px;background:#fff"></div>
</div>
</template>
<script>
import * as echarts from 'echarts'
export default {
name: '',
data() {
return {
charts: '',
opinionData: ["155", "400", "900", "800", "300", "900", "270"]//数据
}
},
methods: {
drawLine(id) {
this.charts = echarts.init(document.getElementById(id))
this.charts.setOption({
title:{
left:'3%',
top:'5%',
text:"最近一周订单数量",//标题文本,支持使用 \n 换行。
},
tooltip: {
trigger: 'axis'
},
legend: {
align:'right',//文字在前图标在后
left:'3%',
top:'15%',
data: ['近一周']
},
grid: {
top:'30%',
left: '5%',
right: '5%',
bottom: '5%',
containLabel: true
},
toolbox: {
feature: {
saveAsImage: {} //保存为图片
}
},
xAxis: {
type: 'category',
boundaryGap:true,
axisTick:{
alignWithLabel:true //保证刻度线和标签对齐
},
data: ["周一","周二","周三","周四","周五","周六","周日"] //x坐标的名称
},
yAxis: {
type: 'value',
boundaryGap: true,
splitNumber:4, //纵坐标数
interval:250 //强制设置坐标轴分割间隔
},
series: [{
name: '近一周',
type: 'line', //折线图line;柱形图bar;饼图pie
stack: '总量',
areaStyle: {
//显示区域颜色---渐变效果
color:{
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [{
offset: 0, color: 'rgb(255,200,213)' // 0% 处的颜色
}, {
offset: 1, color: '#ffffff' // 100% 处的颜色
}],
global: false // 缺省为 false
}
},
itemStyle: {
color: 'rgb(255,96,64)', //改变折线点的颜色
lineStyle: {
color: 'rgb(255,96,64)' //改变折线颜色
}
},
data: this.opinionData
}]
})
}
},
//调用
mounted() {
this.$nextTick(function() {
this.drawLine('main')
})
}
}
</script>
<style scoped>
* {
margin: 0;
padding: 0;
list-style: none;
}
</style>
五、效果图
------------------------------------------------------
点个赞再走呗!&(^v^)&
更多推荐
所有评论(0)