echarts立体柱状图
效果图:安装echartsnpm install echarts --savemain.jsimport Vue from 'vue'import App from './App'import echarts from 'echarts'Vue.prototype.$echarts = echartsVue.use(Element)Vue.config.productionTip = falsen
·
效果图:
安装echarts
npm install echarts --save
main.js
import Vue from 'vue'
import App from './App'
import echarts from 'echarts'
Vue.prototype.$echarts = echarts
Vue.use(Element)
Vue.config.productionTip = false
new Vue({
el: '#app',
components: { App },
template: '<App/>'
})
<template>
<div style="width:800px;height:400px;" id="chart">
</div>
</template>
<script>
export default {
name: 'dataView',
data(){
},
mounted(){
this.drawChart()
},
method:{
drawChart(){
var xData = ["2020-01", "2020-02", "2020-03", "2020-04", "2020-05", "2020-06"]
var line = ["1030", "205", "84", "568", "689", "4587"];
var attr = {
'name': '月平均单价',
'unit': '元/单'
}
// var graphicData = ["A级:1000-10000元/人",
// "B级:10000-100000元/人",
// "C级:100000-10000000元/人",
// ];
var myChart = this.$echarts.init(document.getElementById('chart'));
let option = {
tooltip: {
trigger: 'item',
padding: 1,
formatter: function(param) {
var resultTooltip =
"<div style='background:rgba(13,5,30,.6);border:1px solid rgba(255,255,255,.2);padding:5px;border-radius:3px;'>" +
"<div style='text-align:center;'>" + param.name + "</div>" +
"<div style='padding-top:5px;'>" +
"<span style=''> " + attr.name + ": </span>" +
"<span style=''>" + param.value + "</span><span>" + attr.unit + "</span>" +
"</div>" +
"</div>";
return resultTooltip
}
},
// graphic: [{
// type: 'text',
// z: 100,
// right: '4%',
// top: '8%',
// style: {
// fill: '#81A5E8',
// text: graphicData.join('\n'),
// padding:[20,20],
// font: 'italic small-caps 18px/2 cursive',
// }
// }],
grid: {
left: '5%',
top: '10%',
right: '5%',
bottom: '10%',
},
legend: {
show: true,
icon: 'circle',
orient: 'horizontal',
top: '90.5%',
right: 'center',
itemWidth: 16.5,
itemHeight: 6,
// itemGap: 30,
textStyle: {
// color: '#FFFFFF'
color: '#C9C8CD',
fontSize: 14
}
},
xAxis: [{
data: xData,
axisLabel: {
textStyle: {
color: '#aaaaaa',
fontSize: 14
},
margin: 30, //刻度标签与轴线之间的距离。
},
axisLine: {
show: false //不显示x轴
},
axisTick: {
show: false //不显示刻度
},
boundaryGap: true,
splitLine: {
show: false,
width: 0.08,
lineStyle: {
type: "solid",
color: "#03202E"
}
}
}],
yAxis: [{
splitLine: {
show: false,
lineStyle: {
color: '#eee',
type: 'solid'
}
},
axisTick: {
show: false
},
axisLine: {
show: false
},
axisLabel: {
textStyle: {
color: '#888'
},
}
}],
series: [{ //柱底圆片
name: "",
type: "pictorialBar",
symbolSize: [40, 18], //调整截面形状
symbolOffset: [0, 10],
z: 12,
itemStyle: {
"normal": {
color: new this.echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: "rgba(89,211,255,1)"
},
{
offset: 1,
color: "rgba(23,237,194,1)"
}
])
}
},
data: line
},
//柱体
{
name: '',
type: 'bar',
barGap: '0%',
barWidth: 40, // 柱体宽度
itemStyle: {
"normal": {
"color": {
"x": 0,
"y": 0,
"x2": 0,
"y2": 1,
"type": "linear",
"global": false,
"colorStops": [{ //第一节下面
"offset": 0,
"color": "rgba(0,255,245,0.5)"
}, {
"offset": 1,
"color": "#43bafe"
}]
}
}
},
data: line
},
//柱顶圆片
{
name: "",
type: "pictorialBar",
symbolSize: [40, 18], //调整截面形状[宽, 高]
symbolOffset: [0, -10],
z: 12,
symbolPosition: "end",
"itemStyle": {
"normal": {
color: new this.echarts.graphic.LinearGradient(0, 0, 0, 1,
[{
offset: 0,
color: "rgba(89,211,255,1)"
},
{
offset: 1,
color: "rgba(23,237,194,1)"
}
],
false
),
}
},
data: line
}
]
};
myChart.setOption(option);
window.addEventListener('resize', ()=> {
myChart.resize()
})
}
}
}
</script>
更多推荐
已为社区贡献9条内容
所有评论(0)