1200字范文,内容丰富有趣,写作的好帮手!
1200字范文 > echarts柱形图+折线图混合案例

echarts柱形图+折线图混合案例

时间:2021-04-17 11:03:33

相关推荐

echarts柱形图+折线图混合案例

效果图

vue柱形图+折线图组件

<template><div ref="two"></div></template><script>import echarts from "echarts";import "echarts/lib/chart/pie";import "echarts/lib/chart/line";import "echarts/lib/chart/bar";import "echarts/lib/chart/map";import "echarts/lib/chart/effectScatter";import "echarts/lib/chart/scatter";import "echarts/lib/chart/lines";import "echarts/lib/chart/pictorialBar";import "echarts/lib/component/markPoint";import "echarts/lib/component/geo";export default {props: {propsData: {type: Array, default: () => [] },},data() {return {};},mounted() {this.two();},methods: {two() {const two = echarts.init(this.$refs.two);const {xname,legendName,serisesData,title,colorList,barGap,} = this.propsData;const serises = [];for (let i = 0; i < legendName.length; i++) {serises.push({name: legendName[i],type: "bar",data: serisesData[i],barWidth : 18,//柱图宽度barGap: barGap,itemStyle: {normal: {color: colorList[i],barBorderRadius: [30, 30, 0, 0],},},});}const option = {backgroundColor: "#fff",title: {text: title,x: "25",y: "10",textStyle: {fontWeight: "700",fontSize: 20,color: "#444",},},grid: {left: "3%",right: "3%",bottom: "23%",top: "15%",containLabel: true,},legend: {bottom: 15,textStyle: {color: "#666",padding: [2, 0, 0, 0],},itemGap: 30,itemWidth: 10,itemHeight: 20,data: legendName,},tooltip: {trigger: "axis",axisPointer: {// 坐标轴指示器,坐标轴触发有效type: "shadow", // 默认为直线,可选为:'line' | 'shadow'},backgroundColor: "#fff",borderColor: "#ccc",borderWidth: 1,padding: 10,formatter: function (val) {var temp = val.map((item, index) => {return `<span style="display:inline-block; width:10px;height:10px;background:${val[index].color};margin:0 10px 0 0; border-radius:3px"> </span>${val[index].seriesName}: ${val[index].data}人<br/>`;});return `${val[0].axisValueLabel}<br/>${temp.toString().replace(/[,]/g, "")}`;},textStyle: {fontSize: 14,color: "#666",},},toolbox: {show: true,top: 10,right: 25,itemSize: 37,itemGap:0,feature: {magicType: {type: [ "bar","line"],icon: {bar:"image://data:image/png;base64,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",line:"image://data:image/png;base64,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",},},saveAsImage: {icon:"image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAG/klEQVRoQ+2Zf2wTZRjHn7vr3bp27PdwbKNjsYniAtswhmBmmGUIM5ku/oHGbImGJUBiRM2EEEUKiAsy/1GMxCAQSVT0DxgkDs0yx5g/FsT9SEoWNpxrt2ZjW7OWduuvuzNv7Tvf3trrXVdQEi65XNO+73vfz/N8n/d970rBfX5Q97l+eADwX2cwmRlQO5aYDHi1N5Xek+yPP8cbEwsnARKGiXezWEGSCqfMZjPb1NRUqdVqn6Npej1FUcsBAJ3ouC2K4m1BEHq8Xu/FlpaWbrPZHAAAJHxJIIkAkJGmWltbdVu3bn2N47gmAMhWaAtHMBhsOXfu3Kf19fUeCYiqbKgFQO0XTrfbvU2n0x2jKKpAofCIZqIo2r1eb5NOp/uOgJBmRXZopQARUa+pqdG0trYeYVn2rTBQIvpxH9Hv97fU1dXtb2tr4wFAIGwVNxtqAFBbuqamhrl06dI3DMPULUW1tC/P8xdqa2tfkkAkBQBbhkYAPp/vSNjvydQfGsvn87Votdp3wlnAmZCFiJeBCPEOh+OFrKysr5Jgm1jwotPp3JaZmXkRAJCdcD3EhFACEIr83r17dc3Nzf0URRUnPfTEgKIojjY2Nq45deqUV5KJqLeVAyCjz7jd7t16vf7o3RSPx/Z4PHvS0tI+DmdB1kqxAPD3KPpMVVUV19HR8RdFUTlLBRi4JcIyHUDJitixE0VxxmQyrers7PQTEOjWi6wkBxCadRCAzWZ7uqioqG2p4g+e4eH8VREYGuDYLhpM69Dw0Q+bzbbFYDBciZcFOYCQ9wFAMzc390FqauobSwXY9GYQZlz/jFL7JAWHtzMxh5yfn/9Ip9PtB4CgXC1EA4jwPgIIBAJtGo3mKSUA3a4RGPE6oGH544uam8/wcEFhBgKBQBfHcc+GAcgFLsJG8QA0CIDn+V6apo3xAG7MTUKz7ScQQIT65eugJuuRRV2uDYqQmyFfA6hTMBgcYll2XRgAZ2HRNiMWwIJ9AIAVBGGMoqhlcgB2vwsOjP4IcwLaZCLvUdBUtBHK9CsiuvV77JDHpkEBly4bD1EU79A0XQQAaMCYNpIDQAZFGUAANjmA2eA8HLK2w2TADS/nlYMhJQs+HOsElmLg/VVbFsT23LHCcfsvsIxJgXcNm2QhwgArCQDpPikUAEUAwWDwOsMwD0cLmV/goXmsA27OT4Mpwwjb858INWufHYLTk7/DQ2waHCx+BpC9kHhkL3RkMFpZCJ7nb2k0GlRIOAOKAMj5P+R/lAGfz/c9x3EbogF8Yv8ZfrtjhTW6fHi7aCMw1L9T4xcT16DDOQzZmlSYDXpDGdldWAn9bjv8MHtTFsLv9/+akpKCihgDYBtFrAfSDEQFcDqdzenp6TulAN9OD0DrjAWKuAw4WLwZtDQb0YQXBTg61gmWuUlIoTSwZ2UVPJqaF2rz5eT1BQjUF9UFebhcrhMZGRn71AJgW4UWMJyB3t7eqvLy8gtSgK+n+uCqcwQOF2+BHFYXtSg9vB9axq/Ai3nlC+JxQwTR6fwzBL8yJTOif19fX11FRUWnWgtFBSgpKdEODw/foGl60SOjVwgsiny86Zb8HQHqGS6iiyAIDqPR+NjIyAja0KmqARIgtAqjGkDn+Pj46wUFBe+pEZdoW7vdfqiwsBBt5pD4hKZRvA/ChcxVV1enXb58uYdhmPxEhSnpx/P8uMlk2tDV1YUe9tFmDhWv6oVsYSNHZmFoaGib0Wg8rkRIom0GBwd3rF69+rwk+qq2EjFthKw0NTVlzs3N3ZGoQLl+09PTn+fl5R0gIi9rHyw02piLNnS4FnJycrjR0dEzer2+OpkQHo+nvbi4+JWZmRlkG9L7MaMfDwD9jqfThSkVWSo7O5uzWCz78vPzdyXh+VicmJj4rLS0tNnhcGDPkzMPBohYwHDwFD9ShtcFNCPhwtb09/c/X1pauj/RwuZ5fsJisRwqKytDD/G4WNEVASDhstGXywAJiHemKAvoxBChrFRWVurPnj37qsFg2EnTdORqFMNjgiDMWq3WEw0NDae7u7vRbINEI7HRIk++6Fo0opK3EnhGIrfY2FL4ShsMBu7kyZPr165duzk9Pb2CZdlchmFCz9A8z88EAoFpl8v1x8DAQHtjY2OP1WpFdkHisHjyir7Hp+yrxngAOEtSCBIAZwYD4gkAX7F3yXc8SBy2B7YKBlAsXomFSCtJIcgCRxBLBSCFK3orpxaAXB+iZSQaAOnZWBmQE56Ud6OkCKk9kGgSBn/G1sRX8l8ZHF3S42TE78rrdSkEWRvkokcCkhkmAbDAWKLjRj2aGLWLKln80UTLZSAaDL6/KvFqaiAWoBREyZj/iz/5Yu2f1GRSdbSTcVM1Au9JWyUL2T0RkuhNHgAkGrlk9fsbcbDOT5YuHF4AAAAASUVORK5CYII=",},},},xAxis: [{type: "category",data: xname,axisLabel: {interval:0,// margin: 20,color: "#666",textStyle: {fontSize: 12,},},axisLine: {lineStyle: {color: "#666",},},axisTick: {show: true,inside: true,},},],yAxis: [{min: 0,// max: 100,axisLabel: {// formatter: '{value}%',color: "#666",textStyle: {fontSize: 14,},},axisLine: {lineStyle: {color: "#666",},},axisTick: {inside: true,},splitLine: {show: false,},},],dataZoom: [{show: true,height: 30,xAxisIndex: [0],bottom: 60,start: 0,end: 100,handleStyle: {color: "#5B3AAE",},},{type: "inside",show: true,height: 15,},],series: serises,};two.setOption(option,true);window.addEventListener("resize", function () {two.resize();});},}};</script><style></style>

页面引用

<rich-bar-charts :key="richBarCharts" style="height: 500px;" :propsData="touristStock"></rich-bar-charts>import RichBarCharts from "../components/echarts/richBarCharts";export default {components: {RichBarCharts},data () {return {richBarCharts:1,touristStock:{xname:['景点1','景点2','景点3','景点4','景点5','景点6','景点7','景点8'],legendName:['进园人数','出园人数'],serisesData:[[520,520,205,200,520,764,520,550],[520,764,520,550,520,520,205,200]],title:'进出园人数分析',colorList:['#01ce8d','#ffa922'],barGap:1},//进出园人数统计图分析}}}

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。