欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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集成百度地圖實現位置選擇功能

    Vue集成百度地圖實現位置選擇功能

    由于添加門店時,需要選擇門店的省、市、區(qū)、詳細地址、以及門店的經緯度信息,本文給大家分享Vue集成百度地圖實現位置選擇功能,感興趣的朋友一起看看吧
    2022-06-06
  • 解決vue 給window添加和移除resize事件遇到的坑

    解決vue 給window添加和移除resize事件遇到的坑

    這篇文章主要介紹了解決vue 給window添加和移除resize事件遇到的坑,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2020-07-07
  • VueJs與ReactJS和AngularJS的異同點

    VueJs與ReactJS和AngularJS的異同點

    這篇文章主要為大家詳細介紹了VueJs與ReactJS和AngularJS的異同點,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2016-12-12
  • Vue.js簡易安裝和快速入門(第二課)

    Vue.js簡易安裝和快速入門(第二課)

    這篇文章主要為大家詳細介紹了Vue.js簡易安裝和快速入門的相關資料,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2017-10-10
  • 原生Vue 實現右鍵菜單組件功能

    原生Vue 實現右鍵菜單組件功能

    這篇文章主要介紹了Vue 原生實現右鍵菜單組件功能,本文給大家擴展知識點vue點擊菜單以外區(qū)域,隱藏菜單操作,通過實例代碼給大家介紹的非常詳細,需要的朋友可以參考下
    2019-12-12
  • 基于Vue3實現列表虛擬滾動效果

    基于Vue3實現列表虛擬滾動效果

    這篇文章主要為大家介紹了如何利用Vue3實現列表虛擬滾動效果,文中的示例代碼講解詳細,對我們學習或工作有一定價值,需要的可以參考一下
    2022-04-04
  • vue使用css-rcurlyexpected等less報錯問題

    vue使用css-rcurlyexpected等less報錯問題

    這篇文章主要介紹了vue使用css-rcurlyexpected等less報錯問題,具有很的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2022-10-10
  • vue 地圖可視化 maptalks 篇實例代碼詳解

    vue 地圖可視化 maptalks 篇實例代碼詳解

    這篇文章主要介紹了vue 地圖可視化 maptalks 篇,本文分步驟通過實例代碼給大家介紹的非常詳細,具有一定的參考借鑒價值 ,需要的朋友可以參考下
    2019-05-05
  • vue-cli5.0?webpack?采用?copy-webpack-plugin?打包復制文件的方法

    vue-cli5.0?webpack?采用?copy-webpack-plugin?打包復制文件的方法

    今天就好好說說vue-cli5.0種使用copy-webpack-plugin插件該如何配置的問題。這里我們安裝的 copy-webpack-plugin 的版本是 ^11.0.0,感興趣的朋友一起看看吧
    2022-06-06
  • Vue插件之滑動驗證碼

    Vue插件之滑動驗證碼

    這篇文章主要為大家詳細紹介紹了Vue插件之滑動驗證碼,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2019-09-09

最新評論