在vue中使用echarts(折线图的demo,markline用法)
版权申诉
22 浏览量
2020-10-15
02:52:48
上传
评论
收藏 67KB PDF 举报
在在vue中使用中使用echarts(折线图的折线图的demo,markline用法用法)
主要介绍了在vue中使用echarts(折线图的demo,markline用法)，具有很好的参考价值，希望对大家有所帮助。
一起跟随小编过来看看吧
公司最近在用vue开发项目，项目接近尾声了，趁休息时间写点demo——
vue引入echarts（折线图的demo）
主要是解决引入echarts，markline的使用（基准线）
这是demo的效果图：
vue脚手架不多赘述
1.安装依赖安装依赖
cnpm install echarts -S
2.在在main.js中引入中引入echarts
import echarts from 'echarts'
3.在在main.js中安装中安装
Vue.prototype.echarts = echarts;
一般来说能正常挂载上组件，就可以在页面中正常使用了
废话不多说上代码（因为自己也是小白阶段所以写的注释多了点，以便以后使用）
1.HTML部分部分
<template>
<div class="content">
<p class="prompt_p"> 近七天温度折线图</p>
<div class="seven_echarts" id="seven">
</div>
</div>
</template>
2.js部分部分
<script type="text/javascript">
export default{
data(){
return{
seven_chart:null,
month_chart:null,
seven_option : {
title : {
// text: '未来一周气温变化',//感觉头部有点乱，没使用自带的标题
// subtext: '纯属虚构'
x: 'left',
align: 'center'
},
tooltip: {
trigger: 'axis'
},
legend: {
data:['最高气温','最低气温',]
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
toolbox: {
feature: {
magicType: {type: ['line', 'bar']},//柱状图和西和折线图切换
restore: {},//刷新
saveAsImage: {},//将图表以折线图的形式展现
}
},
xAxis: {
评论0
最新资源