Vue之Echarts实现折线图全过程
作者：Sunshine_Jian
文章主要描述了在Vue项目中安装并引入echart components插件的具体步骤,并解决了一些常见的错误,首先,创建了一个`test.vue`文件,然后引入并配置了ech六 five插件,最后,展示了一个成功的示意图,并强调这是个人经验总结,仅供参考
一、在项目里安装
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>五、效果图
六、总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。