vue项目使用 Echarts 实现双柱柱状图
安装echarts:npm install echarts -S或者 cnpm install echarts -S(淘宝镜像)main.js引入全局引入:import echarts from 'echarts'Vue.prototype.$echarts = echarts按需引入:示例引入的是柱状import echarts from 'echarts/lib/echarts'import
·
安装echarts:
npm install echarts -S 或者 cnpm install echarts -S(淘宝镜像)
main.js引入
全局引入:
import echarts from 'echarts'
Vue.prototype.$echarts = echarts
按需引入:
示例引入的是柱状
import echarts from 'echarts/lib/echarts'
import 'echarts/lib/chart/bar'
export default echarts
页面显示效果:
代码如下:
Html页面:
<div id="approve" ref="approve" style="width:50%; height: 300px;"></div>
如果需要显示竖向,就把 xAxis和yAxis的内容互换就可以啦。
mounted () {
this.drawBar()
},
methods: {
drawBar() {
const userChar = echarts.init(this.$refs.user)
userChar.setOption({
// 设置颜色
color: ['#108EE9', '#86CF68'],
//标注位置
tooltip: {
trigger: 'axis'
},
//提示线
grid: {
left: 100
},
yAxis: {
//y轴的设置
type: 'category', //不连续的字符串
data: this.channel
},
xAxis: {
//x轴的设置
splitLine: { show: false } //去除网格线
},
series: [
//每个形状的设置
{
name: this.$t('NEW'),
type: 'bar',
itemStyle: {
normal: {
label: {
// 显示柱子上的数据
show: true,
// 让数据为0时不显示
formatter: function (val) {
if (val.value !== 0) {
return val.value
} else {
return ''
}
}
}
}
},
// 传给图表的数据
data: this.new(数组)
},
{
name: this.$t('OLD'),
type: 'bar',
itemStyle: {
normal: {
label: {
show: true,
// 让数据为0时不显示
formatter: function (val) {
if (val.value !== 0) {
return val.value
} else {
return ''
}
}
}
}
},
// 传给图表的数据
data: this.old(数组)
}
]
})
更多推荐
已为社区贡献7条内容
所有评论(0)