在 VUE 中使用 Echarts 方法
最编程
2024-04-10 21:26:20
...
<script>
import ECharts from 'vue-echarts'// 在 webpack 环境下指向 components/ECharts.vue
// 手动引入 ECharts 各模块来减小打包体积,柱状图就引入 bar 折线图就引入 line,用到什么就引入什么
import 'echarts/lib/chart/bar'//柱状图
import 'echarts/lib/chart/line'//折线图
import 'echarts/lib/component/tooltip'//提示框组件
import 'echarts/lib/component/title'
import 'echarts/lib/component/legend'
import 'echarts/lib/component/polar'
export default {
name: "tables",
components: {
'v-chart': ECharts
},
data () {
return {
theline: null,
thebar: null,
themonth: null
}
},
mounted: function () {
this.initBar()
this.initLine()
this.initMonth()
},
methods: {
initBar() {
//this.axios.get('/url').then((data) => {this.polar={}}
let data_title = ['个人医疗花费', '同族群医疗花费'];
let cities = ['1年', '2年', '3年', '4年', '5年', '6年', '7年', '8年', '9年', '10年'];
let param_a = [111112,111113,111114,111115,111116,111117,111118,111119,111110,11111];
let param_c = [511111,411111,311111,211111,111111,611111,911111,811111,911111,711111];
let obj = {
m10: {
compare_yearsfee: '9'
}
};
this.thebar = {
legend: {
show: true,
data: data_title,
textStyle:{
color: '#333'
},
top: 2,
left: 10
},
tooltip: {
trigger: 'axis',
formatter: (obj.m10.compare_yearsfee == '')? '{b}<br />{a0}:{c0}元' : '{b}<br />{a0}:{c0}元<br />{a1}:{c1}元'
},
grid: {
top: 56,
left: 18,
right: 26,
bottom: 6,
containLabel: true
},
color: ['#0f0', '#c23531', '#2f4554', '#61a0a8', '#d48265', '#91c7ae', '#749f83', '#ca8622', '#bda29a', '#6e7074', '#546570', '#c4ccd3'],
xAxis: {
type: 'category',
data: cities,
boundaryGap: true,//两边留白
splitLine: {
show: false, //隐藏分割线
lineStyle: {
color: '#ddd',
type: 'solid'
},
//interval: 3,
},
axisLine: {
lineStyle: {
color: '#ddd',
},
},
axisTick: {
show: false,
},
axisLabel: { //轴线刻度设置
//interval: 1,
formatter: '{value}',
color: '#E6E8EB'
},
},
yAxis: [{
type: 'value',
axisLabel: {
formatter: '{value}',
margin: 15,
color: '#E6E8EB'
},
name: '¥ ',
nameGap: 6,
splitLine: {
show: true,
lineStyle: {
color: '#ddd',
type: 'solid'
}
},
axisLine: {
show: false,
lineStyle: {
color: '#ddd'
},
},
axisTick: {
show: false
},
axisLabel: {
formatter: '{value}',
margin: 15,
color: '#E6E8EB'
}
}],
series: [{
name: '个人医疗花费',
type: 'bar',
itemStyle: {
normal: {
color: '#6D92EE',
// shadowColor : 'rgba(0,0,0,0.5)',
// shadowBlur: 8,
// shadowOffsetX: 8,
// shadowOffsetY: 10,
barBorderRadius: [5, 5, 0, 0]
},
},
// itemStyle: {
// normal: {
// color: '#1586ec'
// }
// },
data: param_a,
//legendHoverLink: false,
// emphasis: {
// itemStyle: {
// color: '#6D92EE'
// }
// }
}, {
name: '同族群医疗花费',
type: 'bar',
itemStyle: {
normal: {
color: '#E6E8EB',
barBorderRadius: [5, 5, 0, 0]
},
},
data: param_c,
//legendHoverLink: false,
barCategoryGap:'50%',
// emphasis: {
// itemStyle: {
// color: '#E6E8EB'
// }
// }
}],
animationDuration: 2000,
silent: true
}
},
initLine (){
var obj = {
m01: {
"lift_rates":[80.6,80.3,80,79.7,79.3,79,78.6,78.1,77.7,77.3,76.8,76.3,75.7,75.2,74.6,74.1,73.5,72.8,72.2,71.5,70.8,70.1,69.3,68.4,67.6,66.6,65.7,64.4,63.1,61.8,60.4,58.8,57.2,55.4,53.5,51.3,48.8,46.2,43.5,40.7,37.7,34.7,31.7,28.9,26.1,23.3,20.5,18.1,15.7,13.5,11.3,9.6,7.9,6.3,5,3.9,3,2.3],
"lost_ability":23.93,
"pre_rem":30.11,
"heal_rates":[75.1,74.6,73.9,73.3,72.7,72,71.4,70.7,69.9,69.2,68.4,67.7,66.9,66,65.1,64.3,63.4,62.5,61.5,60.5,59.5,58.5,57.5,56.3,55.2,54,52.8,51.4,49.9,48.4,46.9,45.3,43.6,41.9,40.1,38.1,35.9,33.7,31.5,29.2,26.8,24.6,22.4,20.3,18.3,16.2,14.2,12.5,10.8,9.3,7.8,6.5,5.4,4.3,3.4,2.7,2.1,1.6],
"lift_fee":196719,
"rates_ages":[42,43,44,45,46,47,48,49,50,51,52,53,54,55,56,57,58,59,60,61,62,63,64,65,66,67,68,69,70,71,72,73,74,75,76,77,78,79,80,81,82,83,84,85,86,87,88,89,90,91,92,93,94,95,96,97,98,99],
"pre_lift":71.11,
"lost_heal_ratio":["7.3","7.6","8.3","8.7","9.1","9.7","10.1","10.5","11.2","11.7","12.3","12.7","13.2","13.9","14.6","15.2","15.9","16.5","17.4","18.2","19.0","19.8","20.5","21.5","22.5","23.3","24.4","25.3","26.5","27.7","28.8","29.8","31.2","32.2","33.4","34.6","35.9","37.1","38.1","39.4","40.7","41.1","41.5","42.4","42.6","43.8","44.4","44.8","45.4","45.2","44.9","47.7","46.3","46.5","47.1","44.4","42.9","43.8"]
}
};
var n = Math.ceil(obj.m01.pre_lift);
var tmp_a = parseInt(n) - parseInt(obj.m01.rates_ages[0]) + 1;
var age = (obj.m01.rates_ages).slice(0,tmp_a);
var survival = (obj.m01.lift_rates).slice(0,tmp_a);
var disability = (obj.m01.lost_heal_ratio).slice(0,tmp_a);
this.theline = {
legend: {
data: ['健康率', '失能率'],
textStyle: {
color: '#000'
},
top: 0,
right: 12,
},
tooltip: {
trigger: 'axis',
formatter: '{b}岁<br />{a0}:{c0}%<br />{a1}:{c1}%'
},
grid: {
top: 46,
left: 8,
right: 22,
bottom: 10,
containLabel: true,
},
color: ['#0f0', '#c23531', '#2f4554', '#61a0a8', '#d48265', '#91c7ae', '#749f83', '#ca8622', '#bda29a', '#6e7074', '#546570', '#c4ccd3'],
// toolbox: {
// feature: {
// saveAsImage: {}
// }
// },
xAxis: {
type: 'category',
data: age,
boundaryGap: false,
splitLine: {
show: true, //隐藏分割线
lineStyle: {
color: '#f5f5f5',
type: 'solid'
},
//interval: 3,
},
axisLine: {
show: false,
lineStyle: {
color: '#a9a8a8',
},
},
axisTick: {
show: false
},
axisLabel: { //轴线刻度设置
//interval:6,
formatter: '{value}岁',
},
},
yAxis: [{
type: 'value',
min: 0,
max: 100,
axisLabel: {
color: '#a9a8a8',
formatter: '{value}%'
},
axisTick: {
show: false
},
axisLine: {
lineStyle: {
color: '#f5f5f5'
},
},
interval: 25,
splitLine: {
show: false,
lineStyle: {
color: '#ddd',
type: 'solid'
}
}
},{
type: 'value',
axisLine: {
lineStyle: {
color: '#f5f5f5',
type: 'solid'
}
}
}],
series: [{
name: '健康率',
type: 'line',
lineStyle: {
normal: {
width: 3,
color: '#6293f5',
shadowColor : 'rgba(0,0,0,0.5)',
shadowBlur: 8,
shadowOffsetX: 8,
shadowOffsetY: 10
},
},
itemStyle: {
normal: {
color: '#6293f5'
}
},
data: survival,
showSymbol: false
}, {
name: '失能率',
type: 'line',
lineStyle: {
normal: {
width: 3,
color: '#f5495b',
shadowColor: 'rgba(0,0,0,0.5)',
shadowBlur: 8,
shadowOffsetX: 8,
shadowOffsetY: 10
},
},
itemStyle: {
normal: {
color: '#f5495b'
}
},
data: disability,
showSymbol: false
}]
}
},
initMonth(){
this.themonth = {
tooltip: {
trigger: 'axis'
},
grid: {
top: '3%',
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
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号',
'21号', '22号', '23号', '24号', '25号', '26号', '27号', '28号', '29号', '30号', '31号'
]
}],
yAxis: [{
type: 'value'
}],
textStyle: {
color: '#838FA1'
},
series: [{
name: '新增用户',
type: 'line',
stack: '总量',
areaStyle: {
normal: {}
},
data: [120675, 118962, 101754, 114865, 119076, 111752, 123965, 120363, 113435, 112065,
125042, 120278, 138703, 136790, 135708, 150287, 163187, 150569, 157826, 182633,
199375, 195334, 205617, 220527, 234721, 240938, 239065, 263334, 285365, 302602, 361553
],
itemStyle: {
normal: {
color: '#1cabdb',
borderColor: '#1cabdb',
borderWidth: '2',
borderType: 'solid',
opacity: '1'
},
emphasis: {
}
}
}]
}
}
},
}
</script>
上一篇: 使用 Python 生成色彩图(色彩图)
下一篇: V 形图 图表(双曲线)
推荐阅读
-
在 keil (mdk) 中,在编译时删除未使用的函数,以减少代码量。
-
位、字节、WORD、DWORD 的区别和联系 - Unicode 和 ANSI 的区别就像输入法中 "全宽 "和 "半宽 "的区别一样。 由于不同的 ANSI 编码有不同的标准(不同的字符集),对于给定的多字节字符串,我们必须知道它使用的是哪种字符集,才能知道它包含哪些 "字符"。对于 UNICODE 字符串来说,无论环境如何,它所代表的 "字符 "内容始终是相同的。Unicode 有一个统一的标准,定义了世界上大多数字符的编码,因此拉丁文、数字、简体中文、繁体中文和日文都可以存储在一个编码中。统一码是一个统一的标准,定义了世界上大多数字符的编码。 比特(Bit)和字节(Byte)的区别:例如USB2.0 标准接口的传输速率为 480Mbps,有一些人误认为是每秒 480 兆比特,同样网络带宽为 2MB,就容易误认为是每秒 2 兆比特。其实,480Mbps 应该是 480 兆比特/秒或 480 兆字节/秒,它等于 "60 兆字节/秒";同样,2MB,应该是 256 兆字节/秒。 Bit 和 Byte 译为 "比特",都是数据计量单位,比特="位 "或 "比特"。 Byte = 字节,即 1byte = 8bits,两者的换算关系为 1:8。 Mbps = mega bits per second(兆位/秒)是速率单位,因此 2M 带宽应为 2 兆位/秒,即 2MBps。MB = 兆字节(Megabytes,兆字节)是单位量,1MB/S(兆字节/秒)= 8MBPS(兆字节/秒)。 通常所说的硬盘容量是指 40GB、80GB、100GB,其中的 B 是指 Byte 也称为 "字节"。 1 KB=1024 字节 1 MB=1024 KB=1024*1024 字节 1 GB=1024 MB=1024*1024*1024 字节 例如,以前所谓的 56KB MODEM 转换过来的 56KBps 除以 8 就是 7Kbyte,所以真正从网上下载文件存在硬盘上的速度也是每秒 7Kbyte;也就是说,用 B 表示传输速度一般指 Bit;用 B 表示容量一般指 Byte。比特、字节、WORD、DWORD 的本质。
-
你所不知道的 vue:使用 runWithContext 在非设置期间使用对象
-
使用 CURL 在 php 中构建 POST 请求
-
JS,如果没有方法的话。(在不使用任何 JS 方法的情况下实现圆形方法)
-
贪婪算法在 Python、JavaScript、Java、C++ 和 C# 中的多种实现及其在硬币变化、分数骑士、活动选择和使用哈夫曼编码的最小生成树问题中的应用实例
-
问:如何使用 openpyxl 在 Excel 表中插入数组公式?
-
Python 使用 OpenPyXl 在 excel 表中设置单元格大小 openpyxl 修改 excel 单元格
-
问 在连体架构中,梯度如何飞回网络?即使使用不同的模型,所有 CNN 模型的权重也是相同的。
-
在 win 环境下使用 cv2.imshow 报告 Python 中的 OpenCV 错误解决方案-1.