Vue+Echarts實(shí)現(xiàn)柱狀折線圖
更新時(shí)間：2022年04月02日 10:12:59 作者：天使的同類
這篇文章主要為大家詳細(xì)介紹了Vue+Echarts實(shí)現(xiàn)柱狀折線圖，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
本文實(shí)例為大家分享了Vue+Echarts實(shí)現(xiàn)柱狀折線圖的具體代碼，供大家參考，具體內(nèi)容如下
vue處理json數(shù)據(jù)渲染柱狀折線圖
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); //數(shù)據(jù)
? ? ? ? ? ? let xqo = eval("(" + outdata + ")"); //轉(zhuǎn)換類型
? ? ? ? ? ? for (var i in xqo) { ? //分別獲取日期 ?排行 ?和 銷量的數(shù)組值
? ? ? ? ? ? ? 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: {
? ? ? ? ? ? ? ? ? // 坐標(biāo)軸指示器，坐標(biāo)軸觸發(fā)有效
? ? ? ? ? ? ? ? ? type: "shadow", // 默認(rèn)為直線，可選為：'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: "銷量趨勢(shì)",
? ? ? ? ? ? ? ? ? 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",
? ? ? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ],
? ? ? ? ? ? });
? ? ? ? ? });
? ? },最后就是效果圖：
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
今天被vue中proxy配置困擾了一天,記錄一下,下面這篇文章主要給大家介紹了關(guān)于Vue配置文件中的proxy配置方式的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-08-08
結(jié)合mint-ui移動(dòng)端下拉加載實(shí)踐方法總結(jié)
下面小編就為大家?guī)硪黄Y(jié)合mint-ui移動(dòng)端下拉加載實(shí)踐方法總結(jié)。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-11-11
解決vue與node模版引擎的渲染標(biāo)記{{}}(雙花括號(hào))沖突問題
這篇文章主要介紹了解決vue與node模版引擎的渲染標(biāo)記{{}}(雙花括號(hào))沖突問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-09-09
vue.js+element-ui的基礎(chǔ)表單實(shí)例代碼
這篇文章主要介紹了vue.js+element-ui的基礎(chǔ)表單實(shí)例代碼,技術(shù)棧即html+vue.js+element-ui,而使用它們的方法也很簡(jiǎn)單,引入對(duì)應(yīng)的js和css文件即可,需要的朋友可以參考下2024-03-03
Vue的生命周期就是vue實(shí)例從創(chuàng)建到銷毀的全過程,也就是new?Vue()?開始就是vue生命周期的開始。Vue?實(shí)例有?個(gè)完整的?命周期,也就是從開始創(chuàng)建、初始化數(shù)據(jù)、編譯模版、掛載Dom?->?渲染、更新?->?渲染、卸載?等?系列過程,稱這是Vue的?命周期2022-07-07
Vue Form表單的使用方法(rules格式校驗(yàn)網(wǎng)絡(luò)校驗(yàn)鍵盤按鍵監(jiān)聽)
本文介紹了在Vue.js中使用表單校驗(yàn)規(guī)則（rules）進(jìn)行網(wǎng)絡(luò)請(qǐng)求校驗(yàn)的方法,以及如何通過formRef引用表單對(duì)象并進(jìn)行鍵盤按鍵監(jiān)聽,感興趣的朋友跟隨小編一起看看吧2024-11-11
vue如何給element-ui中的el-tabs動(dòng)態(tài)設(shè)置label屬性
這篇文章主要介紹了vue如何給element-ui中的el-tabs動(dòng)態(tài)設(shè)置label屬性，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-08-08
這篇文章主要幫助大家簡(jiǎn)單的理解vue中track-by屬性,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-10-10
這篇文章主要介紹了Vue組件之Tooltip的示例代碼，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-10-10
這篇文章主要給大家介紹了關(guān)于axios不能使用Vue.use()的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的理解和學(xué)習(xí)具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友可以參考借鑒，下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧。2018-01-01