亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

vue+echarts實(shí)現(xiàn)3D柱形圖

 更新時(shí)間：2022年04月02日 11:49:43   作者：Cherry?  
這篇文章主要為大家詳細(xì)介紹了vue+echarts實(shí)現(xiàn)3D柱形圖，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了vue+echarts實(shí)現(xiàn)3D柱形圖的具體代碼，供大家參考，具體內(nèi)容如下

1、安裝echarts

npm install echarts --save

2、引入echarts

import echarts from "echarts";
//修改原型鏈,可在全局使用
Vue.prototype.$echarts = echarts;

3、創(chuàng)建圖表 首先需要在 HTML 中創(chuàng)建圖表的容器

<div id="echarts_park"></div>
??? ?//圖表的容器必須指定寬高
?? ? #echarts_park {
?? ??? ? width: 400px;
?? ??? ? height: 200px;
}

4、渲染圖表

mounted() {
? ? this.drawPark();
? },
? methods: {
? ? drawPark() {
? ? ?? ?//初始化echarts
? ? ? let myChart = this.$echarts.init(document.getElementById("echarts_park"));
? ? ? let num= [
? ? ? ? "12",
? ? ? ? "12",
? ? ? ? "12",
? ? ? ? "14",
? ? ? ? "12",
? ? ? ? "12",
? ? ? ? "12",
? ? ? ? "14",
? ? ? ? "12",
? ? ? ? "12",
? ? ? ? "12",
? ? ? ];
? ? ? let xData = [
? ? ? ? "杭州市",
? ? ? ? "杭州市",
? ? ? ? "杭州市",
? ? ? ? "杭州市",
? ? ? ? "杭州市",
? ? ? ? "杭州市",
? ? ? ? "杭州市",
? ? ? ? "杭州市",
? ? ? ? "杭州市",
? ? ? ? "杭州市",
? ? ? ? "杭州市",
? ? ? ];
? ? ? var colors = [
? ? ? ? {
? ? ? ? ? type: "linear",
? ? ? ? ? x: 0,
? ? ? ? ? x2: 1,
? ? ? ? ? y: 0,
? ? ? ? ? y2: 0,
? ? ? ? ? colorStops: [
? ? ? ? ? ? {
? ? ? ? ? ? ? offset: 0,
? ? ? ? ? ? ? color: "#0088F1",
? ? ? ? ? ? },
? ? ? ? ? ? {
? ? ? ? ? ? ? offset: 1,
? ? ? ? ? ? ? color: "#00D1FF",
? ? ? ? ? ? },
? ? ? ? ? ],
? ? ? ? },
? ? ? ? {
? ? ? ? ? type: "linear",
? ? ? ? ? x: 0,
? ? ? ? ? x2: 0,
? ? ? ? ? y: 0,
? ? ? ? ? y2: 1,
? ? ? ? ? colorStops: [
? ? ? ? ? ? {
? ? ? ? ? ? ? offset: 0,
? ? ? ? ? ? ? color: "#67D0FF",
? ? ? ? ? ? },
? ? ? ? ? ? {
? ? ? ? ? ? ? offset: 1,
? ? ? ? ? ? ? color: "#3486DA",
? ? ? ? ? ? },
? ? ? ? ? ],
? ? ? ? },
? ? ? ];
? ? ? var barWidth = 18;
? ? ? // 繪制圖表
? ? ? myChart.setOption({
? ? ? ? tooltip: {
? ? ? ? ? trigger: "axis",
? ? ? ? ? axisPointer: {
? ? ? ? ? ? // 坐標(biāo)軸指示器，坐標(biāo)軸觸發(fā)有效
? ? ? ? ? ? type: "shadow", // 默認(rèn)為直線，可選為：'line' | 'shadow'
? ? ? ? ? },
? ? ? ? ? formatter: function (params) {
? ? ? ? ? ? var tipString = params[0].axisValue + "<br />";
? ? ? ? ? ? var key = "value";
? ? ? ? ? ? params.sort(function (obj1, obj2) {
? ? ? ? ? ? ? var val1 = obj1[key];
? ? ? ? ? ? ? var val2 = obj2[key];
? ? ? ? ? ? ? if (val1 < val2) {
? ? ? ? ? ? ? ? return 1;
? ? ? ? ? ? ? } else if (val1 > val2) {
? ? ? ? ? ? ? ? return -1;
? ? ? ? ? ? ? } else {
? ? ? ? ? ? ? ? return 0;
? ? ? ? ? ? ? }
? ? ? ? ? ? });
? ? ? ? ? ? var indexColor;
? ? ? ? ? ? for (var i = 0, length = params.length; i < length; i++) {
? ? ? ? ? ? ? if (params[i].componentSubType == "bar") {
? ? ? ? ? ? ? ? indexColor = params[i + 1].color;
? ? ? ? ? ? ? ? tipString +=
? ? ? ? ? ? ? ? ? '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background:' +
? ? ? ? ? ? ? ? ? indexColor +
? ? ? ? ? ? ? ? ? '"></span>';
? ? ? ? ? ? ? ? tipString +=
? ? ? ? ? ? ? ? ? '<span data-type ="lineTip" data-val=' +
? ? ? ? ? ? ? ? ? params[i].value +
? ? ? ? ? ? ? ? ? ">" +
? ? ? ? ? ? ? ? ? params[i].seriesName +
? ? ? ? ? ? ? ? ? "：" +
? ? ? ? ? ? ? ? ? params[i].value +
? ? ? ? ? ? ? ? ? "</span><br />";
? ? ? ? ? ? ? }
? ? ? ? ? ? }
? ? ? ? ? ? return tipString;
? ? ? ? ? },
? ? ? ? },
? ? ? ? grid: {
? ? ? ? ? left: "3%",
? ? ? ? ? right: "3%",
? ? ? ? ? bottom: "6%",
? ? ? ? ? top: "20%",
? ? ? ? ? containLabel: true,
? ? ? ? },
? ? ? ? xAxis: {
? ? ? ? ? type: "category",
? ? ? ? ? data: xData,
? ? ? ? ? offset: 6,
? ? ? ? ? axisLine: { lineStyle: { color: " #CCCCCC" } },
? ? ? ? ? axisTick: {
? ? ? ? ? ? alignWithLabel: true,
? ? ? ? ? },
? ? ? ? ? axisLabel: {
? ? ? ? ? ? interval: 0,
? ? ? ? ? ? // rotate: 20,
? ? ? ? ? ? textStyle: {
? ? ? ? ? ? ? color: "#000",
? ? ? ? ? ? ? fontStyle: "normal",
? ? ? ? ? ? ? fontFamily: "微軟雅黑",
? ? ? ? ? ? ? fontSize: 13,
? ? ? ? ? ? ? margin: 10,
? ? ? ? ? ? },
? ? ? ? ? },
? ? ? ? },

? ? ? ? yAxis: {
? ? ? ? ? type: "value",
? ? ? ? ? name: "(%)",
? ? ? ? ? nameTextStyle: {
? ? ? ? ? ? align: "right",
? ? ? ? ? ? color: "#4D4D4D",
? ? ? ? ? },
? ? ? ? ? axisLine: {
? ? ? ? ? ? show: false,
? ? ? ? ? ? lineStyle: { color: "#CCCCCC" },
? ? ? ? ? },
? ? ? ? ? axisTick: { show: false },
? ? ? ? ? splitLine: {
? ? ? ? ? ? show: true,
? ? ? ? ? ? lineStyle: { type: "dashed", color: "#CCCCCC" },
? ? ? ? ? },
? ? ? ? ? axisLabel: {
? ? ? ? ? ? textStyle: {
? ? ? ? ? ? ? color: "#4D4D4D",
? ? ? ? ? ? ? fontSize: 14,
? ? ? ? ? ? },
? ? ? ? ? },
? ? ? ? },
? ? ? ? series: [
? ? ? ? ? {
? ? ? ? ? ? name: "2020",
? ? ? ? ? ? type: "bar",
? ? ? ? ? ? barGap: "14%",
? ? ? ? ? ? barWidth: 18,
? ? ? ? ? ? itemStyle: {
? ? ? ? ? ? ? normal: {
? ? ? ? ? ? ? ? color: colors[1],
? ? ? ? ? ? ? ? barBorderRadius: 0,
? ? ? ? ? ? ? },
? ? ? ? ? ? },
? ? ? ? ? ? data: num,
? ? ? ? ? },
? ? ? ? ? {
? ? ? ? ? ? z: 2,
? ? ? ? ? ? name: "2020",
? ? ? ? ? ? type: "pictorialBar",
? ? ? ? ? ? data: [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
? ? ? ? ? ? symbol: "diamond",
? ? ? ? ? ? symbolOffset: ["0%", "50%"],
? ? ? ? ? ? symbolSize: [barWidth, 10],
? ? ? ? ? ? itemStyle: {
? ? ? ? ? ? ? normal: {
? ? ? ? ? ? ? ? color: colors[1],
? ? ? ? ? ? ? },
? ? ? ? ? ? },
? ? ? ? ? },
? ? ? ? ? {
? ? ? ? ? ? z: 3,
? ? ? ? ? ? name: "2020",
? ? ? ? ? ? type: "pictorialBar",
? ? ? ? ? ? symbolPosition: "end",
? ? ? ? ? ? data: qichu,
? ? ? ? ? ? symbol: "diamond",
? ? ? ? ? ? symbolOffset: ["0%", "-50%"],
? ? ? ? ? ? symbolSize: [barWidth, (10 * (barWidth - 1)) / barWidth],
? ? ? ? ? ? itemStyle: {
? ? ? ? ? ? ? normal: {
? ? ? ? ? ? ? ? borderColor: "#67D0FF",
? ? ? ? ? ? ? ? borderWidth: 2,
? ? ? ? ? ? ? ? color: "#67D0FF",
? ? ? ? ? ? ? },
? ? ? ? ? ? },
? ? ? ? ? },
? ? ? ? ],
? ? ? });
? ? },
},

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

相關(guān)文章

  • 關(guān)于vue-lunar-full-calendar的使用說明

    關(guān)于vue-lunar-full-calendar的使用說明

    這篇文章主要介紹了關(guān)于vue-lunar-full-calendar的使用說明，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
    2022-07-07
  • vue+springboot+element+vue-resource實(shí)現(xiàn)文件上傳教程

    vue+springboot+element+vue-resource實(shí)現(xiàn)文件上傳教程

    這篇文章主要介紹了vue+springboot+element+vue-resource實(shí)現(xiàn)文件上傳教程，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
    2020-10-10
  • 使用vant的地域控件追加全部選項(xiàng)

    使用vant的地域控件追加全部選項(xiàng)

    這篇文章主要介紹了使用vant的地域控件追加全部選項(xiàng)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
    2020-11-11
  • vue3如何按需加載第三方組件庫(kù)詳解

    vue3如何按需加載第三方組件庫(kù)詳解

    距離 Vue 3.0 正式版發(fā)布已經(jīng)有一段時(shí)間了,關(guān)于vue3組件庫(kù)相關(guān)的問題還是挺多人感興趣的,這篇文章主要給大家介紹了關(guān)于vue3如何按需加載第三方組件庫(kù)的相關(guān)資料,需要的朋友可以參考下
    2021-06-06
  • Vue3警告:Failed to resolve component:XXX的詳細(xì)解決辦法

    Vue3警告:Failed to resolve component:XXX的詳細(xì)解決辦法

    最近在一個(gè)vue3項(xiàng)目中遇到了報(bào)錯(cuò),整理了些解決辦法,這篇文章主要給大家介紹了關(guān)于Vue3警告:Failed to resolve component:XXX的詳細(xì)解決辦法,文中介紹的非常詳細(xì),需要的朋友可以參考下
    2023-05-05
  • vue3中g(shù)etCurrentInstance不推薦使用及在＜script?setup＞中獲取全局內(nèi)容的三種方式

    vue3中g(shù)etCurrentInstance不推薦使用及在＜script?setup＞中獲取全局內(nèi)容的三種方式

    這篇文章主要給大家介紹了關(guān)于vue3中g(shù)etCurrentInstance不推薦使用及在＜script?setup＞中獲取全局內(nèi)容的三種方式,文中通過介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
    2024-02-02
  • Vue中使用Teleport的方法示例

    Vue中使用Teleport的方法示例

    這篇文章主要為大家介紹了Vue中使用Teleport的方法示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
    2022-08-08
  • vue 父組件調(diào)用子組件方法及事件

    vue 父組件調(diào)用子組件方法及事件

    這篇文章主要介紹了vue 父組件調(diào)用子組件方法及事件的相關(guān)資料，父組件傳入數(shù)組子組件循環(huán)來創(chuàng)建不同的組件模塊,所有事件都在子組件內(nèi)部.怎么實(shí)現(xiàn)這樣一個(gè)功能呢？接下來跟隨腳本之家小編一起看看吧
    2018-03-03
  • VUE多層路由嵌套實(shí)現(xiàn)代碼

    VUE多層路由嵌套實(shí)現(xiàn)代碼

    這篇文章主要為大家詳細(xì)介紹了VUE多層路由嵌套的實(shí)現(xiàn)代碼，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
    2017-05-05
  • vue實(shí)現(xiàn)頂部導(dǎo)航欄以及跳轉(zhuǎn)

    vue實(shí)現(xiàn)頂部導(dǎo)航欄以及跳轉(zhuǎn)

    這篇文章主要介紹了vue實(shí)現(xiàn)頂部導(dǎo)航欄以及跳轉(zhuǎn)方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2023-09-09

最新評(píng)論