Vue+Echarts实现柱状折线图 Vue+Echarts实现柱状折线图

本文实例为大家分享了Vue+Echarts实现柱状折线图的具体代码，供大家参考，具体内容如下
vue处理json数据渲染柱状折线图
HTML：

【Vue+Echarts实现柱状折线图】JS：

drawLineCharts() {let data = https://www.it610.com/article/{sid:"02fertdfg0221",choose: 1,}; //这里是接口的传参axios.request({url: url,//接口地址method: "POST",data: JSON.stringify(data),}).then((res) => {let dateData = https://www.it610.com/article/[]; //日期let rankingData = []; //排行let commentsData = []; //销量let outdata = JSON.stringify(res.result); //数据let xqo = eval("(" + outdata + ")"); //转换类型for (var i in xqo) {//分别获取日期排行和销量的数组值dateData.push(xqo[i].create_time.substring(0, 10)); commentsData.push(xqo[i].comments_value); rankingData.push(xqo[i].ranking); }this.chartPie = echarts.init(document.getElementById("lineCharts")); //表格idthis.chartPie.setOption({title: {text: "",},tooltip: {trigger: "axis",axisPointer: {// 坐标轴指示器，坐标轴触发有效type: "shadow", // 默认为直线，可选为：'line' | 'shadow'},},legend: {orient: "horizontal",data: ["热度", "销量"],},grid: {x: 46,y: 35,x2: 37,y2: 40,borderWidth: 0,},calculable: true,xAxis: [{type: "category",data: dateData,splitLine: {show: false,},axisLabel: {show: true,margin: 20,textStyle: {color: "#a4a7ab",align: "center",},},},],yAxis: [{name: "销量趋势",type: "value",splitLine: {show: false,},axisLabel: {show: true,textStyle: {color: "#a4a7ab",},},// min: 100,},{name: "热度排名",type: "value",position: "right",splitLine: {show: false,},axisLabel: {show: true,formatter: "{value}",textStyle: {color: "#a4a7ab",},},},],series: [{name: "热度",type: "bar",barWidth: "20",data: rankingData,itemStyle: {normal: {barBorderRadius: 5,color: "#36A1DB",},},},{name: "销量",type: "line",// smooth: true,showAllSymbol: true,symbol: "emptyCircle",symbolSize: 5,yAxisIndex: 1,data: commentsData,itemStyle: {normal: {color: "#EEAB56",},},},],}); }); },

最后就是效果图：