vue.js能不能使用echarts-創(chuàng)新互聯(lián)
小編給大家分享一下vue.js能不能使用echarts，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！
創(chuàng)新互聯(lián)主營(yíng)鼓樓網(wǎng)站建設(shè)的網(wǎng)絡(luò)公司,主營(yíng)網(wǎng)站建設(shè)方案,重慶APP軟件開發(fā),鼓樓h5小程序定制開發(fā)搭建,鼓樓網(wǎng)站營(yíng)銷推廣歡迎鼓樓等地區(qū)企業(yè)咨詢vue.js能用echarts，具體操作方法：1、在控制臺(tái)中輸入“npm install echarts --save”命令安裝echarts依賴；2、在main.js中進(jìn)行全局引入，就可以使用echarts創(chuàng)建圖表。
最近工作中需要用到echarts，由于項(xiàng)目是用的vue-cli開發(fā)的。在網(wǎng)上搜到vue中合成了vue-echarts，但是不想使用vue中規(guī)定好的數(shù)據(jù)格式，于是就自己做了一個(gè)vue項(xiàng)目引用原生echarts的簡(jiǎn)單demo，實(shí)現(xiàn)過(guò)程如下：用了兩種實(shí)現(xiàn)方式
準(zhǔn)備工作
1、安裝echarts依賴
控制臺(tái)輸入：npm install echarts --save
2、全局引入
main.js中引入
import echarts from 'echarts' Vue.prototype.$echarts = echarts
創(chuàng)建圖表
第一種創(chuàng)建方式
在一個(gè).vue文件中引入多張圖表
創(chuàng)建WelcomePage.vue
<template> <div> <h2>第一種在vue中使用echart的方式</h2> <div class="charts"> <div id="barGraph" style="height: 350px;"></div> </div> <div class="charts"> <div id="pieGraph" style="height: 350px;"></div> </div> </div> </template>
<script>
// 引入基本模板,按需加載
let echarts = require('echarts/lib/echarts');
// 引入柱狀圖
require('echarts/lib/chart/bar');
// 引入柱狀圖
require('echarts/lib/chart/pie');
require('echarts/lib/component/tooltip');
require('echarts/lib/component/title');
export default {
name: "WelcomePage",
data () {
return { }
},
mounted(){
this.drawBar();
this.drawPie();
},
methods:{
drawBar(){
// 基于dom，初始化echarts實(shí)例
let barGraph = echarts.init(document.getElementById('barGraph'));
// 繪制圖表
barGraph.setOption({
title: {
text: '全年產(chǎn)量趨勢(shì)圖',
left: 'center'
},
tooltip: {
trigger: 'item',
formatter: '{a} <br/>{b} : {c}'
},
legend: {
left: 'center',
data: ['本年', '上年'],
bottom:0
},
xAxis: {
type: 'category',
name: 'x',
splitLine: {show: false},
data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月']
},
grid: {
left: '1%',
right: '2%',
bottom: '8%',
containLabel: true
},
yAxis: {
type: 'category',
name: 'y',
splitLine: {show: true},
data:['10%','20%','30%','40%','50%','60%','70%','80%','90%','100%']
},
series: [
{
name: '本年',
type: 'line',
data: [0.8, 0.98, 0.96, 0.27, 0.81, 0.47, 0.74, 0.23, .69, 0.25, 0.36, 0.56]
},
{
name: '上年',
type: 'line',
data: [1, 0.2, 0.4, 0.8, 0.16, 0.32, 0.64, 1.28, 5.6, 0.25, 0.63, 0.65, 0.12]
},
]
})
},
drawPie(){
let pieGraph = echarts.init(document.getElementById('pieGraph'));
pieGraph.setOption({
title : {
text: '某站點(diǎn)用戶訪問(wèn)來(lái)源',
subtext: '純屬虛構(gòu)',
x:'center'
},
tooltip : {
trigger: 'item',
formatter: "{a} <br/>{b} : {c} (s00wkgo%)"
},
legend: {
orient: 'vertical',
left: 'left',
data: ['直接訪問(wèn)','郵件營(yíng)銷','聯(lián)盟廣告','視頻廣告','搜索引擎']
},
series : [
{
name: '訪問(wèn)來(lái)源',
type: 'pie',
radius : '55%',
center: ['50%', '60%'],
data:[
{value:335, name:'直接訪問(wèn)'},
{value:310, name:'郵件營(yíng)銷'},
{value:234, name:'聯(lián)盟廣告'},
{value:135, name:'視頻廣告'},
{value:1548, name:'搜索引擎'}
],
itemStyle: {
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
})
}
}
}
</script>實(shí)現(xiàn)效果如下圖：
第二種實(shí)現(xiàn)方式（以組件的形式）
創(chuàng)建父組件 father.vue
<div>
<h2>{{ msg }}</h2>
<p>第二種方式：通過(guò)組件的方式進(jìn)行頁(yè)面渲染</p>
<div class="container" >
<bar-graph></bar-graph>
</div>
<div class="container">
<pie-graph></pie-graph>
</div>
</div><script>
// 引入兩個(gè)子組件
import BarGraph from "./bargraph";
import PieGraph from "./piegraph";
export default {
name: "father",
components:{
BarGraph,
PieGraph,
},
data(){
return{
msg: '我是爸爸，想看我的兒子，眼睛請(qǐng)往下移',
}
}
}
</script>創(chuàng)建子組件barGraph.vue
<div>
<p>{{ msg }}</p>
<div class="charts">
<div :id="id" style="min-height: 350px;"></div>
</div>
</div><script>
let echarts = require('echarts/lib/echarts');
// 引入柱狀圖
require('echarts/lib/chart/bar');
require('echarts/lib/component/tooltip');
require('echarts/lib/component/title');
// import echarts from 'echarts'
export default {
name: "bargraph",
// props:['id'], // 第一種接收父親傳過(guò)來(lái)的值的方式
props: {
id: {
type: String,
default: 'chart'
}
},
data(){
return {
msg: "我是第一個(gè)子組件--bar",
chart: null,
}
},
mounted(){
this.drawBar();
},
methods:{
drawBar(){
this.chart = echarts.init(document.getElementById(this.id));
let colors = ['#5793f3', '#d14a61', '#675bba'];
this.chart.setOption(
{
color: colors,
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross'
}
},
grid: {
right: '20%'
},
toolbox: {
feature: {
dataView: {show: true, readOnly: false},
restore: {show: true},
saveAsImage: {show: true}
}
},
legend: {
data:['蒸發(fā)量','降水量','平均溫度']
},
xAxis: [
{
type: 'category',
axisTick: {
alignWithLabel: true
},
data: ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月']
}
],
yAxis: [
{
type: 'value',
name: '蒸發(fā)量',
min: 0,
max: 250,
position: 'right',
axisLine: {
lineStyle: {
color: colors[0]
}
},
axisLabel: {
formatter: '{value} ml'
}
},
{
type: 'value',
name: '降水量',
min: 0,
max: 250,
position: 'right',
offset: 80,
axisLine: {
lineStyle: {
color: colors[1]
}
},
axisLabel: {
formatter: '{value} ml'
}
},
{
type: 'value',
name: '溫度',
min: 0,
max: 25,
position: 'left',
axisLine: {
lineStyle: {
color: colors[2]
}
},
axisLabel: {
formatter: '{value} °C'
}
}
],
series: [
{
name:'蒸發(fā)量',
type:'bar',
data:[2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3]
},
{
name:'降水量',
type:'bar',
yAxisIndex: 1,
data:[2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3]
},
{
name:'平均溫度',
type:'line',
yAxisIndex: 2,
data:[2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2]
}
]
}
)
}
}
}
</script>創(chuàng)建pieGraph.vue
<template>
<div>
<p>{{ msg }}</p>
<div class="charts">
<div :id="id" style="min-height: 350px;"></div>
</div>
</div>
</template><script>
import echarts from 'echarts'
export default {
name: "piegraph",
props:{
id: {
type: String,
default: 'pieChart'
}
},
data(){
return{
msg: '我是第二個(gè)子組件--pie',
pieChart: null
}
},
mounted(){
this.drawPie();
},
methods: {
drawPie () {
this.pieChart = echarts.init(document.getElementById(this.id));
this.pieChart.setOption(
{
title : {
text: '某站點(diǎn)用戶訪問(wèn)來(lái)源',
subtext: '純屬虛構(gòu)',
x:'center'
},
tooltip : {
trigger: 'item',
formatter: "{a} <br/>{b} : {c} (0cq08ag%)"
},
legend: {
orient: 'vertical',
left: 'left',
data: ['直接訪問(wèn)','郵件營(yíng)銷','聯(lián)盟廣告','視頻廣告','搜索引擎']
},
series : [
{
name: '訪問(wèn)來(lái)源',
type: 'pie',
radius : '55%',
center: ['50%', '60%'],
data:[
{value:335, name:'直接訪問(wèn)'},
{value:310, name:'郵件營(yíng)銷'},
{value:234, name:'聯(lián)盟廣告'},
{value:135, name:'視頻廣告'},
{value:1548, name:'搜索引擎'}
],
itemStyle: {
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
}
)
}
}
}
</script>效果實(shí)現(xiàn)如下：
路由文件如下：
import WelcomePage from '@/components/WelcomePage'
import Father from '@/components/father'
import BarGraph from '@/components/bargraph'
import PieGraph from '@/components/piegraph'
export default new Router({
routes: [
{
path: '/',
name: 'WelcomePage',
component: WelcomePage
},
{
path: '/father',
name: 'father',
component: Father,
children:[
{
path: '/bargraph',
name: 'bargraph',
component: BarGraph
},
{
path: '/piegraph',
name: 'piegraph',
component: PieGraph
}
]
},
]
})以上是“vue.js能不能使用echarts”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！
分享題目：vue.js能不能使用echarts-創(chuàng)新互聯(lián)
文章分享：http://www.js-pz168.com/article12/cdoodc.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供用戶體驗(yàn)、網(wǎng)站排名、網(wǎng)站營(yíng)銷、網(wǎng)站維護(hù)、自適應(yīng)網(wǎng)站、虛擬主機(jī)
聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)
猜你還喜歡下面的內(nèi)容
- 什么是Python異常處理機(jī)制-創(chuàng)新互聯(lián)
- 淺談GPU虛擬化技術(shù)(四)-GPU分片虛擬化-創(chuàng)新互聯(lián)
- 如何使用layui的分頁(yè)功能-創(chuàng)新互聯(lián)
- 網(wǎng)站安裝OVSSL證書有什么好處-創(chuàng)新互聯(lián)
- oracle如何顯示當(dāng)前執(zhí)行的用戶和操作實(shí)例-創(chuàng)新互聯(lián)
- Koa框架中間件怎么用-創(chuàng)新互聯(lián)
- 全國(guó)通用ADSL寬帶賬號(hào)快速檢測(cè)工具0.2拽爺專版-創(chuàng)新互聯(lián)
- 美容院加盟運(yùn)營(yíng)系統(tǒng)軟件開發(fā) 2021-05-14
- APP軟件開發(fā)為什么那么貴，具體貴在哪里？ 2020-11-13
- 2019 年軟件開發(fā)新趨勢(shì)必知！ 2019-08-07
- 善用管理工具，提高軟件開發(fā)項(xiàng)目質(zhì)量 2016-08-29
- 西安音樂(lè)歌曲app軟件開發(fā) 2020-12-30
- 哈爾濱app軟件開發(fā)趨勢(shì)如何把握 2020-12-30
- 作為四年的軟件開發(fā)人員，五個(gè)重要經(jīng)驗(yàn)教訓(xùn) 2021-05-22
- 5句話，識(shí)破軟件開發(fā)外包公司的這些“圈套” 2016-08-30
- 軟件開發(fā)中，我們應(yīng)該保持的工匠心態(tài) 2021-05-14
- 如何讓App軟件開發(fā)流程更科學(xué) 2022-05-07
- 上海app軟件開發(fā)如何找到切入點(diǎn) 2021-01-01
- 成都時(shí)尚穿搭A(yù)PP軟件開發(fā) 2022-06-03