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)文章
由于添加門店時(shí)，需要選擇門店的省、市、區(qū)、詳細(xì)地址、以及門店的經(jīng)緯度信息，本文給大家分享Vue集成百度地圖實(shí)現(xiàn)位置選擇功能，感興趣的朋友一起看看吧2022-06-06
解決vue 給window添加和移除resize事件遇到的坑
這篇文章主要介紹了解決vue 給window添加和移除resize事件遇到的坑，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-07-07
VueJs與ReactJS和AngularJS的異同點(diǎn)
這篇文章主要為大家詳細(xì)介紹了VueJs與ReactJS和AngularJS的異同點(diǎn),具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-12-12
這篇文章主要為大家詳細(xì)介紹了Vue.js簡(jiǎn)易安裝和快速入門的相關(guān)資料，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-10-10
這篇文章主要介紹了Vue 原生實(shí)現(xiàn)右鍵菜單組件功能，本文給大家擴(kuò)展知識(shí)點(diǎn)vue點(diǎn)擊菜單以外區(qū)域，隱藏菜單操作，通過實(shí)例代碼給大家介紹的非常詳細(xì),需要的朋友可以參考下2019-12-12
基于Vue3實(shí)現(xiàn)列表虛擬滾動(dòng)效果
這篇文章主要為大家介紹了如何利用Vue3實(shí)現(xiàn)列表虛擬滾動(dòng)效果，文中的示例代碼講解詳細(xì)，對(duì)我們學(xué)習(xí)或工作有一定價(jià)值，需要的可以參考一下2022-04-04
vue使用css-rcurlyexpected等less報(bào)錯(cuò)問題
這篇文章主要介紹了vue使用css-rcurlyexpected等less報(bào)錯(cuò)問題，具有很的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-10-10
vue 地圖可視化 maptalks 篇實(shí)例代碼詳解
這篇文章主要介紹了vue 地圖可視化 maptalks 篇，本文分步驟通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值 ,需要的朋友可以參考下2019-05-05
vue-cli5.0?webpack?采用?copy-webpack-plugin?打包復(fù)制文件的方法
今天就好好說說vue-cli5.0種使用copy-webpack-plugin插件該如何配置的問題。這里我們安裝的 copy-webpack-plugin 的版本是 ^11.0.0，感興趣的朋友一起看看吧2022-06-06
這篇文章主要為大家詳細(xì)紹介紹了Vue插件之滑動(dòng)驗(yàn)證碼，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-09-09