Vue-Echarts
基於 ECharts v4.1.0+ 開發，依賴 Vue.js v2.2.6+。
安裝
npm install echarts vue-echarts使用方法
example.vue組件 這裏是柱狀圖、折線圖示例
Echarts 配置參考官方文檔 https://echarts.baidu.com
通過指令綁定 options 參數來實現
自定義方法 initBar() 可以 axios 請求來實現動態渲染
代碼如下
<template>
<v-chart :options="themonth"/>
<v-chart :options="thebar"/>
<v-chart :options="theline"/>
</template><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>