vue使用echarts如何实现双柱状图和双y轴的柱状图
作者：这是提莫大人
这篇文章主要介绍了vue使用echarts如何实现双柱状图和双y轴的柱状图问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
使用echarts实现双柱状图和双y轴的柱状图
1.引入
cnpm i echarts -S
2.main.js中引入
import echarts from 'echarts' Vue.prototype.$echarts = echarts
3.echarts.vue文件中
实现多个柱形图就用series
双y轴就用yAxis多放一个参数
<template> <div class="MonthsCon"> <div id="MonthsConChart" style=" height: 230px"></div> </div> </template>
<script>
export default {
data() {
return {
xData: [1,3, 3],
yetData: [10, 20, 30], // 已办结
inData: [11, 12 , 14], // 受理中
rateData: [1, 2, 3], // 办结率
};
},
mounted() {
this.initMap()
},
methods: {
initMap() {
var myChart = this.$echarts.init(document.getElementById('MonthsConChart'));
const option = {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
crossStyle: {
color: '#999'
}
}
},
legend: {
icon: 'rect',//形状 类型包括 circle，rect,line，roundRect，triangle，diamond，pin，arrow，none
itemWidth: 10, // 设置宽度
itemHeight: 4, // 设置高度
itemGap: 24, // 设置间距
data: ['夏天的销量', '冬天的销量'],
textStyle: {
//文字样式
color: '#c1dafc',
fontSize: '12'
},
right: '30%'
},
xAxis: [
{
type: 'category',
data: ['春天', '夏天', '秋天','冬天'],
axisPointer: {
type: 'shadow'
}
}
],
yAxis: [
{
type: 'value',
name: '单位个',
min: 0,
max: 50,
interval: 10,
axisLabel: {
formatter: '{value}'
}
},
{
type: 'value',
name: '单位个',
min: 0,
max: 50,
interval: 10,
axisLabel: {
formatter: '{value}'
}
}
],
series: [
{
name: '夏天的销量',
type: 'bar',
barWidth: '5%',
data: [20, 20, 30, 40]
},
{
name: '冬天的销量',
type: 'bar',
barWidth: '5%',
data: [10,20, 11, 1]
}
],
color: ['#b1de6a', '#4ab0ee']
};
myChart.setOption(option);
}
},
};
</script>echarts实现双y轴，并且实现制定数据使用y轴
在使用echarts中，我们经常会用到双y轴去展示数据，有时候，我们可能需要自己去设置，具体使用某一个y轴去展示某一个具体的数据。
如图所示
我们的y轴有两个，数据共有3个，这个图有两个不好的点：
1.没有标明左右坐标具体是显示什么的
2.很明显今日访问人数和昨日访问人数需要使用同一个坐标进行数据的对比。
优化后的设置
1.双y轴的设置，加上具体是用来显示什么数据的
2.设置具体的数据使用某一个y轴进行展示
其中yAxisIndex,默认为0，在单个图表实例中存在多个y轴的时候使用，所以，我们可以通过设置这个，实现具体的数据使用具体的y轴展示。
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。