前言最近在弄echarts图表，遇到了同一个图表展示多个柱子，并且鼠标滑过的时候显示对应的个数以及百分比。我只展示了我写的js部分，具体的引入使用请参考官网 Echarts官网 一、效果图二、实现方法1.在series中直接使用tooltip（适合单个柱状图）代码如下（示例）： 其中后台返回的数据格式是{ result：[ { 'data':['aaaa','bbbb','ccccc'], 'percent':['10','4','2','6','7'] } ] } 2.在tooltip中设置（适合多个柱状图）代码如下（示例）： 其中后台返回的数据格式是{ result：[ { 'val':['aaaa','bbbb','ccccc','dddd','eeee'], 'data':[ { name:'aaaaaaaaaa', type:'bar', data:['20','30','49','0','50'] }, { name:'bbbbbbb', type:'bar', data:['20','30','49','0','50'] }, { name:'cccccc', type:'bar', data:['20','30','49','0','50'] }, { name:'ddddddd', type:'bar', data:['20','30','49','0','50'] }, { name:'eeeeee', type:'bar', data:['20','30','49','0','50'] } ], 'percent':[ { 'percent':['10','4','2','6','7'] }, { 'percent':['10','4','2','6','7'] }, { 'percent':['10','4','2','6','7'] }, { 'percent':['10','4','2','6','7'] }, { 'percent':['10','4','2','6','7'] } ] } ] } 总结提示：方法一中的 data 跟 percent 的值必须要一一对应的，方法二 中的 val 的值是柱状图的x轴的数据， val 的值得个数跟 data:[‘20’,‘30’,‘49’,‘0’,‘50’] 中值得个数是相同的，并且跟 percent 中的值是一一对应的

作为前端人员，日常图表、报表、地图的接触可谓相当频繁，今天小编隆重退出前端框架之VUE结合百度echart实现中国地图+各种图表的展示与使用；作为“你值得拥有”专栏阶段性末篇，值得一看import pie from 'com/pie/pie'
import line from 'com/line/line'
import multipleColumn from 'com/multipleColumn/multipleColumn'
import point from 'com/point/point'
export default {
data() {
return {
items: []
}
},
mounted() {
this.init()
},
methods: {
oresize() {
this.$root.charts.forEach((myChart) => {
myChart.resize()
})
},
init() {
this.items = document.querySelectorAll('.flex-container .item')
for (let i = 0; i < this.items.length; i++) {
this.items[i].dataset.order = i + 1;
}
},
clickChart(clickIndex) {
let activeItem = document.querySelector('.flex-container .active')
let activeIndex = activeItem.dataset.order
let clickItem = this.items[clickIndex - 1]
if (activeIndex === clickIndex) {
return
}
activeItem.classList.remove('active')
clickItem.classList.add('active')
this._setStyle(clickItem, activeItem)
},
_setStyle(el1, el2) {
let transform1 = el1.style.transform
let transform2 = el2.style.transform
el1.style.transform = transform2
el2.style.transform = transform1
}
},
components: {
multipleColumn,
point,
'v-line': line,
pie: pie
}
}import filter from 'com/filter/filter'
import echarts from 'echarts'
import china from 'echarts/map/js/china'
import world from 'echarts/map/js/world'
import http from 'js/http'
export default {
data() {
return {
mcChart: {},
options2: {
shortcuts: [
{
text: '最近一周',
value () {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
return [start, end];
},
onClick: (picker) => {
}
},
{
text: '最近一个月',
value () {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
return [start, end];
},
onClick: (picker) => {
}
},
{
text: '最近三个月',
value () {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
return [start, end];
},
onClick: (picker) => {
}
}
]
},
value2: '',
startTime: '',
endTime: '',
}
},
methods: {
_mcCharts() {
var dom = document.querySelector('.multipleColumn .main')
this.mcChart = echarts.init(dom);
var app = {}, option = null;
app.title = '堆叠柱状图';
option = {
title: {
text: '全国主要城市空气质量',
left: 'left',
textStyle: {
color: '#fff',
fontWeight: 300,
}
},
tooltip : {
trigger: 'axis',
axisPointer : {
// 坐标轴指示器，坐标轴触发有效
type : 'shadow'
// 默认为直线，可选为：'line'
'shadow'
}
},
color: ['#AE5548', '#6D9EA8', '#9CC2B0', '#C98769', '#48cda6','#fd87ab','#11abff','#ffdf33','#968ade'],
legend: {
data:['直接访问','邮件营销','联盟广告','视频广告','搜索引擎','百度','谷歌','必应','其他'],
x: 'right',
textStyle: {
// legend字体颜色
color: '#fff'
}
},
grid: {
left: '5%',
right: '8%',
top: '16%',
bottom: '3%',
containLabel: true
},
xAxis : [
{
name: '时间',
type : 'category',
data : ['周一','周二','周三','周四','周五','周六','周日'],
axisLine:{
lineStyle:{
color: '#fff',
type:'solid'
//'dotted'虚线 'solid'实线
}
}
}
],
yAxis : [
{
name: '数量',
type : 'value',
splitLine: {
lineStyle: {
color: ['rgba(230, 230, 230, 0.2)'],
type:'dotted'
//'dotted'虚线 'solid'实线
}
},
axisLine: {
lineStyle:{
color: '#fff',
type:'solid'
//'dotted'虚线 'solid'实线
}
}
}
],
series : [
{
name:'直接访问',
type:'bar',
data:[320, 332, 301, 334, 390, 330, 320]
},
{
name:'邮件营销',
type:'bar',
stack: '广告',
data:[120, 132, 101, 134, 90, 230, 210]
},
{
name:'联盟广告',
type:'bar',
stack: '广告',
data:[220, 182, 191, 234, 290, 330, 310]
},
{
name:'视频广告',
type:'bar',
stack: '广告',
data:[150, 232, 201, 154, 190, 330, 410]
},
{
name:'搜索引擎',
type:'bar',
data:[862, 1018, 964, 1026, 1679, 1600, 1570],
markLine : {
lineStyle: {
normal: {
type: 'dashed'
}
},
data : [
[{type : 'min'}, {type : 'max'}]
]
}
},
{
name:'百度',
type:'bar',
barWidth : 5,
stack: '搜索引擎',
data:[620, 732, 701, 734, 1090, 1130, 1120]
},
{
name:'谷歌',
type:'bar',
stack: '搜索引擎',
data:[120, 132, 101, 134, 290, 230, 220]
},
{
name:'必应',
type:'bar',
stack: '搜索引擎',
data:[60, 72, 71, 74, 190, 130, 110]
},
{
name:'其他',
type:'bar',
stack: '搜索引擎',
data:[62, 82, 91, 84, 109, 110, 120]
}
]
};
if (option && typeof option === "object") {
this.mcChart.setOption(option, true);
};
// 绑定点击事件
this.mcChart.on('click', function (params) {
console.log(params)
})
},
// 时间插件
onChangeDate(date) { // daterange改变的时候触发的事件 默认接收一个date对象
this.startTime = date[0];
this.endTime = date[1];
},
// 时间插件
okChange() { // 点击确定按钮触发的事件
var params = {startTime: this.startTime, endTime: this.endTime}
if( params.startTime === ''
params.endTime=== '') {
this.$Message.info('请选择日期范围');
return
} else {
this._showPoint(params)
}
},
// 时间插件
onClear() {
console.log('今日实况')
},
},
mounted: function() {
this._mcCharts()
window.addEventListener('resize', function() { // 第一步：main中添加style="100%",第二步：添加.bind(this)
this.mcChart.resize()
}.bind(this));
},
components: {
'v-filter': filter
}
}

数据的重要性我们大家都知道，就算再小的项目中都可能使用几个图表展示，我最近在做项目的过程中也是需要用到图表，最后选择了echarts图表库，这篇文章主要介绍了Vue使用Echarts画柱状图前言本篇来学习下柱状图的实现柱状图实现步骤ECharts 最基本的代码结构准备x轴的数据准备 y 轴的数据准备 option , 将 series 中的 type 的值设置为: bar 效果柱状图常见效果标记markPoint：最大值\最小值markPoint: { // 标记最大最小值 data: [ {type: 'max', name: '最大值'}, {type: 'min', name: '最小值'} ] } 效果markLine：平均值markLine: { data: [ { type: 'average', name: '平均值' } ] } 效果显示lable：数值显示 label: { show: true, // 柱状图显示数值 rotate: 30, // 值旋转角度 } 效果barWidth：柱的宽度barWidth: '30%' // 柱的宽度效果横向柱状：只需要让x轴的角色和y轴的角色互换一下即可. 既 xAxis 的 type 设置为value , yAxis 的 type 设置为 category , 并且设置 data 即可xAxis: { // type: 'category', // data: xDataArr type: 'value' }, yAxis: { // type: 'value' type: 'category', data: xDataArr }, 效果完整代码 到此这篇关于Vue使用Echarts画柱状图详解的文章就介绍到这了,更多相关vue Echarts画柱状图内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！