vue 项目引入 echarts折线图
一。components文件下新建 lineCharts.vue
<template>
<div :class="className" :style="{ height: height, width: width }" />
</template> <script>
import * as echarts from 'echarts'
require('echarts/theme/macarons') // echarts theme export default { props: {
className: {
type: String,
default: 'chart'
},
width: {
type: String,
default: '100%'
},
height: {
type: String,
default: '400px'
},
autoResize: {
type: Boolean,
default: true
},
chartData: {
type: Object,
required: true
}
},
data() {
return {
chart: null
}
},
watch: {
chartData: {
deep: true,
handler(val) {
this.setOptions(val)
}
}
},
mounted() {
this.$nextTick(() => {
this.initChart()
})
},
beforeDestroy() {
if (!this.chart) {
return
}
this.chart.dispose()
this.chart = null
},
methods: {
initChart() {
this.chart = echarts.init(this.$el, 'macarons')
this.setOptions(this.chartData)
},
setOptions({ expectedData, actualData } = {}) {
this.chart.setOption({
legend: {
data: ['AC06H', 'AC06L', 'AC12N', 'AC12S', 'AC13E'],
textStyle: {
color: '#fff'
}
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
toolbox: {
feature: {
saveAsImage: {}
}
},
xAxis: {
type: 'category',
boundaryGap: false,
data: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10','11', '12', '13', '14', '15','16','17','18','19','20']
},
yAxis: {
type: 'value'
},
series: [
{
name: 'AC06H',
type: 'line',
stack: 'Total',
smooth: false,
data: [691,301, 134, 590, 634, 420, 132, 530, 310,301,254, 320, 590, 134, 530, 310, 590,90, 230, 210],
itemStyle: {
normal: {
//areaStyle: {type: 'default',color:'#d5f0fd'}, //阴影颜色
lineStyle:{color:'#00ffff'}
}
},
},
{
name: 'AC06L',
type: 'line',
stack: 'Total',
smooth: false,
data: [220, 382, 691,301, 134, 590, 634,520,34,123,90,691,301, 400,254, 320, 590,120, 530, 310],
itemStyle: {
normal: {
lineStyle:{color:'#ff00ff'}
}
},
},
{
name: 'AC12N',
type: 'line',
stack: 'Total',
smooth: false,
data: [150, 432, 101,254, 720, 590,120, 530, 382, 101, 682,390, 30, 520,691,301, 254, 320, 130, 410],
itemStyle: {
normal: {
lineStyle:{color:'#fff'}
}
},
},
{
name: 'AC12S',
type: 'line',
stack: 'Total',
smooth: false,
data: [320, 832, 101,600, 382,434, 210, 330, 50, 90, 501, 834,100, 432, 101, 382,590, 130, 400,520],
itemStyle: {
normal: {
lineStyle:{color:'#00a0e9'}
}
},
},
{
name: 'AC13E',
type: 'line',
stack: 'Total',
smooth: false,
data: [600, 382,434, 210, 330, 120, 232, 201, 501, 834, 432, 101, 382,434, 10, 330, 120 ,832, 501, 834,],
itemStyle: {
normal: {
lineStyle:{color:'#ffff00'}
}
},
}
]
})
}
}
}
</script>
二。需要用到的页面引入组件:
效果图如下:
vue 项目引入 echarts折线图的更多相关文章
- vue下使用echarts折线图及其横坐标拖拽功能
vue页面中使用折线图,并且有时间段筛选.因此就需要用到横坐标的拖拽功能. 界面效果如下: 现在来看这个效果的实现代码: drawLine() { let that = this, lineDate ...
- vue使用axios读取本地json文件来显示echarts折线图
编辑器:HBuilderx axios文档:http://www.axios-js.com/zh-cn/docs/ echarts实例:https://echarts.apache.org/examp ...
- vue项目使用echarts按需引入实现地图动态显示效果时,报错:TypeError: Cannot read property 'dataToPoint' of undefined
vue项目使用echarts按需引入实现地图动态显示效果时,报错:TypeError: Cannot read property 'dataToPoint' of undefined 借鉴了该大神的文 ...
- 实现Echarts折线图的虚实转换
需求:医院的体温单,在统计体温时,对于正常情况下统计的体温数据,需要显示实线:对于进行物理降温后统计的体温数据,需要显示虚线. 现有的体温单是运用 Echarts 折线图,统一用实线显示.因此在这基础 ...
- vue 项目引入字体报错
vue 项目引入特殊字体,总是提示有问题 原因是,在webpack 里面的配置有问题 在项目文件里面引入字体的时候,应该写url-loader 而不能是url
- echarts折线图动态改变数据时的一个bug
echarts折线图中当增加dataZoom,修改start大于0的时候,会出现折线混乱,变成竖直的线,绘制有问题. 解决方法,在dataZoom中增加filterMode: 'empty' http ...
- d3.js 教程 模仿echarts折线图
今天我们来仿echarts折线图,这个图在echarts是折线图堆叠,但是我用d3改造成了普通的折线图,只为了大家学习(其实在简单的写一个布局就可以).废话不多说商行代码. 1 制作 Line 类 c ...
- ECharts折线图堆叠设置为不堆叠的方法
下图是ECharts折线图堆叠的官方源码,设置折线图不堆叠只需要将每一个stack的值设置为不一样的名称或者将stack属性删除即可. option = { title: { text: '折线图堆叠 ...
- echarts折线图,数据切换时(最近七天)绘图不合理现象
echarts折线图,当进行数据切换时存在绘制不合理的问题,数据没错,但绘制不对. 两个0之间的连线应该是平滑直线,如图: 正确的显示: 解决: 在myCharts.setOption(option) ...
- 【React】react项目引入echarts插件 K线图
参考npm文档:https://www.npmjs.com/package/echarts-for-react 由于npm上已经有针对react项目出的echarts插件,所以在这里直接安装 第一步: ...
随机推荐
- P7113 [NOIP2020] 排水系统 (拓扑排序)
(不想打高精,也不想学习其他大佬的神仙写法,打了90分的错解). 本题容易想到用拓扑排序处理,涉及分数的加法,用long long会超时,不过通分时先除后乘卡一下也可以拿90分. 结构体真是个复杂的东 ...
- 220702 T1 玩具 (图的同构,全排列判定)
[题目描述] Tom和Jerry各有一个玩具,每个玩具都是由M根绳子连接到N个球上制成的. 在Tom的玩具中,球的编号为1,-,N,第i条绳子将球Ai和Bi连接起来. 类似地,在Jerry的玩具中,球 ...
- 学习ASP.NET Core Blazor编程系列六——初始化数据
学习ASP.NET Core Blazor编程系列一--综述 学习ASP.NET Core Blazor编程系列二--第一个Blazor应用程序(上) 学习ASP.NET Core Blazor编程系 ...
- 如何去了解Spring
对于你想了解的技术 官方总是一个合适的选择 首先,我们所指的Spring 一般指的是Spring Framework,伴随着的时代的进步,Spring全家桶也逐渐完善起来 Spring 1.Why S ...
- day01-4-订座功能
满汉楼01-4 4.功能实现03 4.5订座功能 4.5.1功能说明 如果该餐桌处于已经预定或者就餐状态时,不能进行预定,并给出相应提示 4.5.2思路分析 根据显示界面,要考虑以下两种状态 检测餐桌 ...
- 第一个微信小程序的初始化过程、小程序微信开发平台的下载、如何注册一个微信小程序的账号
文章目录 1.注册微信小程序账号 1.1 小程序的注册流程 1.2 登录小程序账号 2.下载微信小程序开发者平台 3.新建一个小程序 3.1 点击加号 3.2 填写项目目录和小程序ID 3.3 点击确 ...
- Vulnhub 靶机 pwnlab_init 渗透——详细教程
1. 下载 pwnlab_ini 靶机的 .ova 文件并导入 VMware: pwnlab下载地址:PwnLab: init ~ VulnHub 导入VMware时遇到VMware上虚机太多,无法确 ...
- 18.drf request及源码分析
REST framework的 Request 类扩展了Django标准的 HttpRequest ,添加了对REST framework请求解析和身份验证的支持. 源代码片段: class Requ ...
- 每日算法3:随机生成五个不同整数,将数字转换为RMB格式
随机生成五个不同整数 点击查看代码 /* 题目解析: 1.采用Math对象的random()方法, 2.将每次生成的数跟之前的数判断相等则此次生成无效i-- */ function randomNum ...
- MySQL高可用集群MHA方案
MySQL高可用集群MHA方案 爱奇艺在用的数据库高可用方案 MHA 是目前比较成熟及流行的 MySQL 高可用解决方案,很多互联网公司正是直接使用或者基于 MHA 的架构进行改造实现 MySQL 的 ...