原生echart和vue-echart的使用詳解
原生echart
(下方有vue-echart)
- 官網(wǎng)文檔 https://echarts.apache.org/zh/index.html
- 優(yōu)點(diǎn):方便修改
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
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() }
顯示
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() }
顯示
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) }
示例
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>
總結(jié)
本篇文章就到這里了,希望能夠給你帶來(lái)幫助,也希望您能夠多多關(guān)注腳本之家的更多內(nèi)容!
相關(guā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)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-07-07vue與ant-tree結(jié)合偽造懶加載并可以查詢(xún)
這篇文章主要為大家介紹了vue與ant-tree結(jié)合偽造懶加載并可以查詢(xún)實(shí)現(xiàn)示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-07-07解決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-02Vue數(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