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

原生echart和vue-echart的使用詳解

 更新時(shí)間:2022年02月10日 15:32:27   作者:短腿姑娘  
這篇文章主要為大家詳細(xì)介紹了原生echart和vue-echart的使用,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下,希望能夠給你帶來(lái)幫助

原生echart

(下方有vue-echart)

1.安裝

npm install echarts --save

2.引用

import * as echarts from 'echarts'//局部或全局定義Vue.prototype.$echarts = echarts

3.基礎(chǔ)

3.1 series.type

包括:line(折線(xiàn)圖)、bar(條形圖)、pie(餅圖)、scatter(散點(diǎn)圖)、graph(圖形圖)、tree(樹(shù)狀圖)等

3.2 series.data

在每個(gè)系列中聲明:option

[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機(jī)制,建議將圖片保存下來(lái)直接上傳(img-1XSBoZDe-1643440325661)(:/46e8c4fb75ba416aa2bc370fd38edcc3)]

3.3 series.data

echarts包括這些組件:xAxis(笛卡爾坐標(biāo)系的x軸)、yAxis(笛卡爾坐標(biāo)系的y軸)、grid(笛卡爾坐標(biāo)系的底板)、angleAxis(極坐標(biāo)系的角度軸) , radiusAxis(極坐標(biāo)系的半徑軸),polar(極坐標(biāo)系的底板),geo(GEO坐標(biāo)系),dataZoom(改變數(shù)據(jù)顯示范圍的組件),visualMap(指定視覺(jué)對(duì)象的組件)映射),tooltip(工具提示組件)、toolbox(工具箱組件)、series

在這里插入圖片描述

3.4 ECharts 常用的樣式

如陰影、不透明度、顏色、邊框顏色、邊框?qū)挾鹊?,由itemStyle串聯(lián)設(shè)置。

itemStyle: {
    // shadow size
    shadowBlur: 200,
    // horizontal offset of shadow
    shadowOffsetX: 0,
    // vertical offset of shadow
    shadowOffsetY: 0,
    // shadow color
    shadowColor: 'rgba(0, 0, 0, 0.5)'
}

4.柱狀圖

代碼示例

	//div區(qū)域
	<div id="bar" style="width: 600px;height: 400px;"></div>
	//配置樣式
	methods: {
		barEcharts () {
      	  var myChart = this.$echarts.init(document.getElementById('bar'))
      	// 配置圖表
		  var option = {
			title: {
			  text: '標(biāo)題'
			},
			//提示框
			tooltip: {},
			legend: {
			  data: ['']
			},
			//x軸顯示種類(lèi)
			xAxis: {
			  data: ['種類(lèi)一', '種類(lèi)二', '種類(lèi)三', '種類(lèi)四', '種類(lèi)五', '種類(lèi)六']
			},
			//y軸可填數(shù)值等
			yAxis: {
			},
			series: [{
			  name: '銷(xiāo)量',
			  type: 'bar',
			  //y軸數(shù)值
			  data: [5,
				{
				  value: 20,
				  itemStyle: {
					color: '#FFB5C5'
				  }
				}, 36, 10, 10, 20]
				}]
		  }
		  myChart.setOption(option)
   	}
  }
//設(shè)置
 mounted () {
    this.barEcharts()
 }

顯示

[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機(jī)制,建議將圖片保存下來(lái)直接上傳(img-BEr5tzGb-1643440325663)(:/758eab770a614630b8823a747b9b2773)]

5.折線(xiàn)圖

示例代碼

//div
<div id="line" style="width: 600px;height: 400px;"></div>
	//option配置
   lineEcharts () {
      var myChart = this.$echarts.init(document.getElementById('line'))
      // 配置圖表
      var option = {
        title: {
          text: 'Stacked Line'
        },
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: ['Email', 'Union Ads']
        },
		//笛卡爾坐標(biāo)系的底板
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
		//工具框
        toolbox: {
          feature: {
            saveAsImage: {}
          }
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
          type: 'value'
        },
        series: [
		//線(xiàn)一
          {
            name: 'Email',
            type: 'line',
            stack: 'Total',
            data: [120, 132, 101, 134, 90, 230, 210]
          },
		  //線(xiàn)二
          {
            name: 'Union Ads',
            type: 'line',
            stack: 'Total',
            data: [220, 182, 191, 234, 290, 330, 310]
          }
        ]
      }
      myChart.setOption(option)
    }
 //設(shè)置
 mounted () {
    this.lineEcharts()
 }

顯示

[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機(jī)制,建議將圖片保存下來(lái)直接上傳(img-bEWrP9tc-1643440325664)(:/662b52c145184cf48a7fbe17b8f652a0)]

6.餅狀圖

示例代碼

//div
<div id="pie" style="width: 600px;height: 400px;"></div>
	//option
    pieEcharts () {
      var myChart = this.$echarts.init(document.getElementById('pie'))
      // 配置圖表
      var option = {
        title: {
          text: 'Referer of a Website',
          subtext: 'Fake Data',
          left: 'center'
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          left: 'left'
        },
        series: [
          {
            name: 'Access From',
            type: 'pie',
            radius: '50%',
            data: [
              { value: 1048, name: 'Search Engine' },
              { value: 735, name: 'Direct' },
              { value: 580, name: 'Email' },
              { value: 484, name: 'Union Ads' },
              { value: 300, name: 'Video Ads' }
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      }
      myChart.setOption(option)
    }

示例

[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機(jī)制,建議將圖片保存下來(lái)直接上傳(img-pVmKWfdb-1643440325665)(:/e3d85c101d36425c9b23375d739b909f)]

vue-echart

  • 優(yōu)點(diǎn):配置簡(jiǎn)單,方便使用

安裝

	//vue 2 
	npm install echarts vue-echarts
	npm i -D @vue/composition-api
	//vue 3
	npm install echarts vue-echarts

引用

//可全局也可在要使用的文件中用
import { use } from 'echarts/core'
import { CanvasRenderer } from 'echarts/renderers'
import { PieChart } from 'echarts/charts'
import {
  TitleComponent,
  TooltipComponent,
  LegendComponent
} from 'echarts/components'
import ECharts, { THEME_KEY } from 'vue-echarts'
use([
  CanvasRenderer,
  PieChart,
  TitleComponent,
  TooltipComponent,
  LegendComponent
])

使用

<v-chart class="chart" :option="option" />
export default {
  name: '',
  components: {
    'v-chart': ECharts
  },
  provide: {
    [THEME_KEY]: 'dark'
  },
  data () {
    return {
      //option 與原生一致
    }
  }
}

整體例子

<template>
  <v-chart class="chart" :option="option" />
</template>
<script>
import { use } from 'echarts/core'
import { CanvasRenderer } from 'echarts/renderers'
import { PieChart } from 'echarts/charts'
import {
  TitleComponent,
  TooltipComponent,
  LegendComponent
} from 'echarts/components'
import ECharts, { THEME_KEY } from 'vue-echarts'
use([
  CanvasRenderer,
  PieChart,
  TitleComponent,
  TooltipComponent,
  LegendComponent
])
export default {
  name: 'HelloWorld',
  components: {
    'v-chart': ECharts
  },
  provide: {
    [THEME_KEY]: 'light'
  },
  data () {
    return {
      option: {
        title: {
          text: 'Referer of a Website',
          subtext: 'Fake Data',
          left: 'center'
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          left: 'left'
        },
        series: [
          {
            name: 'Access From',
            type: 'pie',
            radius: '50%',
            data: [
              { value: 1048, name: 'Search Engine' },
              { value: 735, name: 'Direct' },
              { value: 580, name: 'Email' },
              { value: 484, name: 'Union Ads' },
              { value: 300, name: 'Video Ads' }
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      }
    }
  }
}
</script>
<style scoped>
.chart {
  height: 400px;
}
</style>

[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機(jī)制,建議將圖片保存下來(lái)直接上傳(img-BLOPvjI5-1643440325666)(:/ae94a3501f444dbfaed73b5a0564808d)]

總結(jié)

本篇文章就到這里了,希望能夠給你帶來(lái)幫助,也希望您能夠多多關(guān)注腳本之家的更多內(nèi)容!    

相關(guān)文章

  • Vue.js基礎(chǔ)知識(shí)匯總

    Vue.js基礎(chǔ)知識(shí)匯總

    Vue.js 專(zhuān)注于 MVVM 模型的 ViewModel 層。它通過(guò)雙向數(shù)據(jù)綁定把 View 層和 Model 層連接了起來(lái)。Vue.js和其他庫(kù)相比是一個(gè)小而美的庫(kù),作者的主要目的是通過(guò)一個(gè)盡量簡(jiǎn)單的 API 產(chǎn)生可反映的數(shù)據(jù)綁定和可組合的視圖組件,感覺(jué)作者的思路非常清晰。
    2016-04-04
  • vue 項(xiàng)目引入echarts 添加點(diǎn)擊事件操作

    vue 項(xiàng)目引入echarts 添加點(diǎn)擊事件操作

    這篇文章主要介紹了vue 項(xiàng)目引入echarts 添加點(diǎn)擊事件操作,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
    2020-09-09
  • 解決vue組件銷(xiāo)毀之后計(jì)時(shí)器繼續(xù)執(zhí)行的問(wèn)題

    解決vue組件銷(xiāo)毀之后計(jì)時(shí)器繼續(xù)執(zhí)行的問(wèn)題

    這篇文章主要介紹了解決vue組件銷(xiāo)毀之后計(jì)時(shí)器繼續(xù)執(zhí)行的問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
    2020-07-07
  • vue常見(jiàn)的通信方式總結(jié)

    vue常見(jiàn)的通信方式總結(jié)

    我們?nèi)粘m?xiàng)目開(kāi)發(fā)中,少不了組件之間的通信,我們可能只知道一些常見(jiàn)的方式比如props,emits,其實(shí),實(shí)現(xiàn)組件間的通信有很多種方式,本文就給大家總結(jié)一些我們常見(jiàn)的通信方式,需要的朋友可以參考下
    2023-08-08
  • Vue中的Strorage本地化存儲(chǔ)詳解

    Vue中的Strorage本地化存儲(chǔ)詳解

    這篇文章主要介紹了Vue中的Strorage本地化存儲(chǔ)詳解,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2022-04-04
  • 詳解Vue中如何進(jìn)行分布式日志管理與日志分析

    詳解Vue中如何進(jìn)行分布式日志管理與日志分析

    在現(xiàn)代應(yīng)用程序中,日志是一項(xiàng)重要的功能,用于幫助開(kāi)發(fā)人員和運(yùn)維人員了解應(yīng)用程序的行為并進(jìn)行故障排除,本文將介紹如何在Vue應(yīng)用程序中實(shí)現(xiàn)分布式日志管理和日志分析功能,感興趣的可以了解一下
    2023-06-06
  • vue與ant-tree結(jié)合偽造懶加載并可以查詢(xún)

    vue與ant-tree結(jié)合偽造懶加載并可以查詢(xún)

    這篇文章主要為大家介紹了vue與ant-tree結(jié)合偽造懶加載并可以查詢(xún)實(shí)現(xiàn)示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
    2023-07-07
  • 解決vuex刷新數(shù)據(jù)消失問(wèn)題

    解決vuex刷新數(shù)據(jù)消失問(wèn)題

    這篇文章主要介紹了解決vuex刷新數(shù)據(jù)消失問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
    2020-11-11
  • 解決vue創(chuàng)建項(xiàng)目使用vue-router和vuex報(bào)錯(cuò)Object(...)is not a function

    解決vue創(chuàng)建項(xiàng)目使用vue-router和vuex報(bào)錯(cuò)Object(...)is not a&nb

    這篇文章主要介紹了解決vue創(chuàng)建項(xiàng)目使用vue-router和vuex報(bào)錯(cuò)Object(...)is not a function問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2024-02-02
  • Vue數(shù)據(jù)代理的原理和實(shí)現(xiàn)

    Vue數(shù)據(jù)代理的原理和實(shí)現(xiàn)

    數(shù)據(jù)代理是什么?通過(guò)一個(gè)對(duì)象代理,對(duì)另一個(gè)對(duì)象中屬性的操作,簡(jiǎn)單就是說(shuō):可以通過(guò)?對(duì)象b?對(duì)?對(duì)象a?中的屬性進(jìn)行操作,這里我學(xué)到的數(shù)據(jù)代理是用Object.defineProperty這個(gè)方法進(jìn)行操作
    2022-11-11

最新評(píng)論