echarts 柱状图＋折线图

const barLineSymbolImg = [require('../../../../../images/components/app/xxx/icon-1.png'), require('../../../../../images/components/app/xxx/icon-2.png')];// 导出模块
export default {props: {// 需要传递的数据data: {type: Array,default() {return [{name: '北京北京北京北京北京北京北京',value1: 20,value2: 15},{name: '上海',value1: 10,value2: 5},{name: '成都',value1: 15,value2: 25},{name: '重庆',value1: 20,value2: 12}];}}},data() {return {// echarts对象myEchart: null,// 参数options: {}};},// 创建元素mounted() {this.init();},// 销毁destroyed() {// 销毁图表this.destroyedChart();},methods: {setDefaultOptions() {this.options = {// 提示框组件tooltip: {show: true,trigger: 'axis',formatter: function (a) {return `${a[0].name}<br>${a[1].seriesName}${a[0].value}件<br>${a[3].seriesName}${a[3].value}件`;}},// 当前有效绘制区域的占位grid: {top: 80,right: 20,left: 65,bottom: 85},legend: {show: true,// 控制水平还是竖直orient: 'horizontal',textStyle: {fontSize: 16,color: '#bbd2fc'},// 控制上下距离y: 20,// legend之间的间距itemGap: 50,data: [{name: '数目一', icon: `image://${barLineSymbolImg[0]}`}, {name: '数目二', icon: `image://${barLineSymbolImg[1]}`}]},// x轴处理xAxis: {type: 'category',data: [],// 坐标轴axisLine: {show: true,lineStyle: {color: '#012fb8'}},// 坐标轴分割线splitLine: {show: false,lineStyle:{color:'#071c4e',type:'solid'}},// 坐标轴的刻度axisTick: {show: false},// x 轴名称axisLabel: {color:'#bbd2fc',formatter:function (value) {let ret = '';const maxLength = 5;const valLength = value.length;const rowN = Math.ceil(valLength / maxLength);if (rowN > 1) {for (let i = 0; i < 2; i++) {let temp = '';const start = i * maxLength;const end = start + maxLength;temp = `${value.substring(start, end)}\n`;ret += temp;}return `${ret.substring(0, ret.length - 2)}...`;}return value;},margin: 20,fontSize:16,lineHeight: 18,rotate:30,interval: 0}},// y轴处理yAxis: [{type: 'value',// 设置成1保证坐标轴分割刻度显示成整数minInterval: 1,axisTick: {show: false},axisLine:{show: false},splitLine: {show: true,lineStyle:{color:'#071c4e',type:'solid'}},splitNumber:4,// 刻度值axisLabel: {margin: 25,color:'#d2e4fc',fontSize:16},name:'',nameLocation:'end',nameTextStyle:{color:'#556372',fontSize:16,lineHeight: 40,align:'right',padding:[0, 25, 0, 0]}}],series: [// 数据柱子顶部圆颜色 【实际数据】2{name: '顶部圆圈',type: 'pictorialBar',symbol: 'circle',symbolSize: [25, 8],symbolOffset: [0, -4],symbolPosition: 'end',label: {normal: {show: false,position: 'top',textStyle: {fontSize: '16',color: '#01b4e6'}}},z: 3,color: '#01b4e6',itemStyle: {normal: {color: '#01b4e6'}},// 图形是否不响应和触发鼠标事件，默认为 false，即响应和触发鼠标事件。silent: false,barMinHeight: 5,data: []},{name: '数目一',type: 'bar',barWidth: 25,barMinHeight: 4,data: [],z: 2,// 添加渐变itemStyle: {normal: {color: new window.echarts.graphic.LinearGradient(0, 1, 0, 0,[{offset: 0,color: '#0f46c7'},{offset: 1,color: '#0aced4'}])}}},{name: '底部圆圈',type: 'pictorialBar',symbol: 'circle',symbolSize: [25, 8],symbolOffset: [0, 4],z: 3,color: '#0061ff',itemStyle: {normal: {color: '#0061ff'}},// 图形是否不响应和触发鼠标事件，默认为 false，即响应和触发鼠标事件。silent: false,barMinHeight: 5,data: []},{name: '数目二',type: 'line',// 拐点设置为实心symbol: 'circle',// 拐点大小symbolSize: 16,color: '#fff',z: 5,smooth: false,data: [],// 添加渐变itemStyle: {normal: {// 拐点颜色color: '#fff',// 拐点边框颜色borderColor: '#c8b62d',// 拐点边框大小borderWidth: 6}},// 线的样式lineStyle: {normal: {// 折线颜色color: new window.echarts.graphic.LinearGradient(0, 0, 1, 0,[{offset: 0,color: '#ffa800'},{offset: 1,color: '#ffde00'}]),// 折现粗细width: 3}},label:{show:false}}]};},/*** @description 初始化的方法* @name init* @return {*} 无*/init() {// 更新数据this.update(this.data);},/*** @description 刷新图表* @return {*} 无*/refresh() {if (this.myEchart) {this.myEchart.resize();}},/*** @description 设置图表的数据* @name getChartData* @param {object} data 参数* @return {*} 无*/update(data) {// 先判断数据是否存在if (!Array.isArray(data)) {return false;}// 如果不存在echartsif (!this.myEchart) {// 图表对象this.myEchart = window.echarts.init(this.$refs.jsEchart);// 绑定resize 事件this.bindResizeEvent();}// 设置默认参数this.setDefaultOptions();// 更新数据this.updateData(data);// 清空图表this.myEchart.clear();// 生成图表this.myEchart.setOption(this.options);},updateData(data) {// y 轴const _yAxis = [];// 【实际数据】const _data1 = [];const _data2 = [];// 循环数据data.forEach(function (item) {// x 轴_yAxis.push(item.name);// 当前的值const _value1 = Number(item.value1);const _value2 = Number(item.value2);// 数据列表_data1.push(_value1);_data2.push(_value2);});// x轴数据this.options.xAxis.data = _yAxis;// 处理series数据 （实际数据）this.options.series[0].data = _data1;this.options.series[1].data = _data1;this.options.series[2].data = _data1;this.options.series[3].data = _data2;},// resize 事件处理函数resizeHandler() {if (this.myEchart) {this.myEchart.resize();}},/*** @description 绑定resize 事件* @name init* @return {*} 无*/bindResizeEvent() {// 绑定resize事件window.addEventListener('resize', () => {this.resizeHandler();});},// 取消事件绑定unbindResizeEvent() {// 取消绑定resize事件window.removeEventListener('resize', () => {this.resizeHandler();});},/*** @description 销毁图表* @name destroyedChart* @return {*} 无*/destroyedChart() {// 如果存在echartsif (this.myEchart) {// 销毁实例，销毁后实例无法再被使用。this.myEchart.dispose();this.myEchart = null;// 取消事件绑定this.unbindResizeEvent();}}}
};

legend中name和series中name要一致，才能显示出legend

echarts 柱状图＋折线图相关推荐

从后端数据库获取数据并传值到前端vue项目的echarts柱状图/折线图/饼图里
不同图表的数据获取有一定的区别在这些区别上花了不少功夫试验,把最后成功的方法做个记录,如果有类似项目要做的话,也可看看当个参考. 后端后端都大同小异,方法上没有区别,在这里以柱状图为例. sql: ...
echarts柱状图+折线图实例
<!DOCTYPE html> <html lang="en"><head><meta charset="utf-8" ...
echarts中折线图、柱状图之间的转换
echarts中折线图.柱形图.数据视图的转换需要toolbox里面的内容(也就是加粗的部分) // 基于准备好的dom,初始化echarts实例 var day = echarts.init ...
echarts图表折线图柱状图多个X轴Y轴以及一个Y轴反向
echarts图表折线图柱状图多个X轴Y轴以及一个Y轴反向 option1: {color: ['#21E9F6', '#F2CE2E', '#EE2929', '#006DD9', '#1789FF ...
Echarts实现堆叠柱状图+折线图
Echarts实现堆叠柱状图+折线图,以便后续使用时复制 //堆疊Bar圖+折線圖 option = {title: {text: '动态数据',subtext: '纯属虚构'},tooltip: { ...
Echarts实现折线图+柱状图+折线图填充
用Echarts练习实现折线图+柱状图+折线图填充,以便后续使用时可直接复制 option = {title: {text: '动态数据',subtext: '纯属虚构'},tooltip: {tri ...
Echarts 双侧双表头柱状图折线图
Echarts 双侧双表头柱状图折线图带箭头区分颜色成品图片(如需折线图自行更改) 废话不多say 上代码
柱状图折线图混合使用
<!DOCTYPE html> <html><head><meta charset="utf-8"><title>柱状图 ...
php echarts 两条曲线图,使用laravel和ECharts实现折线图效果的例子
1.首先引入echart.js 2.html页面,要有一个布局容器,用来显示图像,一定要设置宽和高 3.echarts折线图的使用 var myChart = echarts.init(documen ...
php制作曲线柱形图的框架,用GD图库生成横竖柱状图折线图的类_php
最近写的一个GD图库用以生成横竖柱状图和折线图的类库,算是一个教学例程吧 Class ImageReport{ var $X;//图片大小X轴 var $Y;//图片大小Y轴 var $R;//背影色 ...

echarts 柱状图＋折线图

echarts 柱状图＋折线图相关推荐

最新文章

热门文章