Vue+Echarts實現柱狀折線圖
更新時間:2022年04月02日 10:12:59 作者:天使的同類
這篇文章主要為大家詳細介紹了Vue+Echarts實現柱狀折線圖,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
本文實例為大家分享了Vue+Echarts實現柱狀折線圖的具體代碼,供大家參考,具體內容如下
vue處理json數據渲染柱狀折線圖
HTML:
<div id="lineCharts" style="width: 100%; height: 500px; margin-top: 20px"></div>
JS:
drawLineCharts() { ? ? ? ? let data = {sid: "02fertdfg0221",choose: 1,}; ?//這里是接口的傳參 ? ? ? ? axios ? ? ? ? ? .request({ ? ? ? ? ? ? url: url, ?//接口地址 ? ? ? ? ? ? method: "POST", ? ? ? ? ? ? data: JSON.stringify(data), ? ? ? ? ? }) ? ? ? ? ? .then((res) => { ? ? ? ? ? ? let dateData = []; //日期 ? ? ? ? ? ? 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")); ?//表格id ? ? ? ? ? ? this.chartPie.setOption({ ? ? ? ? ? ? ? title: { ? ? ? ? ? ? ? ? text: "", ? ? ? ? ? ? ? }, ? ? ? ? ? ? ? tooltip: { ? ? ? ? ? ? ? ? trigger: "axis", ? ? ? ? ? ? ? ? axisPointer: { ? ? ? ? ? ? ? ? ? // 坐標軸指示器,坐標軸觸發(fā)有效 ? ? ? ? ? ? ? ? ? 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", ? ? ? ? ? ? ? ? ? ? }, ? ? ? ? ? ? ? ? ? }, ? ? ? ? ? ? ? ? }, ? ? ? ? ? ? ? ], ? ? ? ? ? ? }); ? ? ? ? ? }); ? ? },
最后就是效果圖:
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。
相關文章
解決vue 給window添加和移除resize事件遇到的坑
這篇文章主要介紹了解決vue 給window添加和移除resize事件遇到的坑,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07vue使用css-rcurlyexpected等less報錯問題
這篇文章主要介紹了vue使用css-rcurlyexpected等less報錯問題,具有很的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-10-10vue-cli5.0?webpack?采用?copy-webpack-plugin?打包復制文件的方法
今天就好好說說vue-cli5.0種使用copy-webpack-plugin插件該如何配置的問題。這里我們安裝的 copy-webpack-plugin 的版本是 ^11.0.0,感興趣的朋友一起看看吧2022-06-06