前言
Echarts官网上的例子大多是原生js，那么我们在vue项目中该如何使用？本文举两个例子。
一、Echarts示例
先上效果图：
在线例子查看：
1、Globe Layers
2、模拟时钟效果（钟表这个找不到原作者了，只能看看克隆下来的了）
二、使用步骤
1.引入库
首先在终端执行：npm install echarts --save，然后在main.js全局引用。
import echarts from 'echarts'
Vue.prototype.$echarts = echarts
新建文件test.vue，在终端执行cnpm install echarts-gl -S 和下载world.js(下载地址)，然后在script下面导入。elqpe、rJQYikcpl、Qtal分别为3张图，下载地址：
https://gallery.echartsjs.com/asset/get/s/data-1491890179041-Hkj-elqpe.jpg
https://gallery.echartsjs.com/asset/get/s/data-1491889019097-rJQYikcpl.jpg
https://gallery.echartsjs.com/asset/get/s/data-1491837999815-H1_44Qtal.jpg
world.js和三张图放置合适的目录（下面代码路径仅做参考，需要自己改）。
<script>
import 'echarts-gl';
import World from "../../../static/echarts/world.js";
import elqpe from '@/assets/echarts_images/data-1491890179041-Hkj-elqpe.jpg';
import rJQYikcpl from '@/assets/echarts_images/data-1491889019097-rJQYikcpl.jpg';
import Qtal from '@/assets/echarts_images/data-1491837999815-H1_44Qtal.jpg';
2.完整代码
<template>
<div class="main">
<div class="main-left">
<div id="clock" :style="{height: '550px'}"></div>
</div>
<div class="main-right">
<div id="earth" :style="{height: '550px'}"></div>
</div>
</div>
</template>
<script>
import 'echarts-gl';
import World from "../../../static/echarts/world.js";
import elqpe from '@/assets/echarts_images/data-1491890179041-Hkj-elqpe.jpg';
import rJQYikcpl from '@/assets/echarts_images/data-1491889019097-rJQYikcpl.jpg';
import Qtal from '@/assets/echarts_images/data-1491837999815-H1_44Qtal.jpg';
export default {
name: "EchartsTest",
data () {
return {
}
},
mounted(){
this.getTestView();
},
methods: {
getTestView(){
this.drawLine();
},
drawLine(){
var option = {};
let earth = this.$echarts.init(document.getElementById('earth'));
let mapChart = this.$echarts.init(document.createElement('canvas'), null, {
width: 2048,
height: 1024
});
mapChart.setOption({
geo: {
type: 'map',
map: 'world',
top: 0,
left: 0,
right: 0,
bottom: 0,
boundingCoords: [[-180, 90], [180, -90]],
itemStyle: {
normal: {
areaColor: 'transparent',
borderColor: '#fff'
},
emphasis: {
areaColor: 'yellow'
}
},
label: {
show: false
}
}
});
option = {
backgroundColor: '#000',
globe: {
baseTexture: elqpe,
heightTexture: rJQYikcpl,
displacementScale: 0.1,
shading: 'lambert',
environment: Qtal, //空间底图
light: {
ambient: {
intensity: 0.1
},
main: {
intensity: 1.5
}
},
layers: [{
type: 'blend',
texture: mapChart
}]
},
series: []
};
earth.setOption(option);
/** 引用Cool_LYPMEN 模拟时钟修改汉字星期
* 代码584-690为添加处
*/
let clock = this.$echarts.init(document.getElementById('clock'));
option = {
tooltip: {
// formatter: "{a}：{c}"
backgroundColor: '#fff',
borderColor: '#f60',
borderWidth: '1px',
textStyle: {
color: '#333'
},
formatter: function(param) {
var time = Math.floor(param.value);
if(param.seriesIndex === 0){
return '<em style="color:' + param.color + ';">当前小时:' + time + '</em>'
}
if(param.seriesIndex === 1){
return '<em style="color:' + param.color + ';">当前星期:' + time + '</em>'
}
if(param.seriesIndex === 2){
return '<em style="color:' + param.color + ';">当前月份:' + time + '</em>'
}
if(param.seriesIndex === 4){
return '<em style="color:' + param.color + ';">当前小时:' + time + '</em>'
}
if(param.seriesIndex === 5){
return '<em style="color:' + param.color + ';">当前分钟:' + time + '</em>'
}
if(param.seriesIndex === 6){
return '<em style="color:' + param.color + ';">当前秒:' + time + '</em>'
}
}
},
// backgroundColor: "rgba(0,0,0,0.1)",
series: [{ //小表盘24小时
name: '小时',
type: 'gauge',
center: ['28%', '50%'], // 默认全局居中
radius: '22%', //仪表盘半径
min: 0,
max: 24,
startAngle: 90,
endAngle: -269.9999,
splitNumber: 24,
animation: 0,
pointer: { //仪表盘指针
show: 1,
length: '90%',
width: 3
},
itemStyle: { //仪表盘指针样式
normal: {
color: '#00b0b0',
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10,
shadowOffsetX: 2,
shadowOffsetY: 2
}
},
axisLine: { //仪表盘轴线样式
lineStyle: {
color: [
[1, '#337ab7']
],
width: 6
}
},
splitLine: { //分割线样式
length: 6,
lineStyle: {
width: 1
}
},
axisTick: { //仪表盘刻度样式
show: 0,
splitNumber: 5, //分隔线之间分割的刻度数
length: 5, //刻度线长
lineStyle: {
color: ['#ffffff']
}
},
axisLabel: { //刻度标签
show: 1,
distance: 2, //标签与刻度线的距离
textStyle: {
color: '#0000ff'
},
formatter: function(t) {
switch (t + '') {
case '0':
return '';
case '1':
return '';
case '2':
return '';
case '3':
return '3';
case '4':
return '';
case '5':
return '';
case '6':
return '6';
case '7':
return '';
case '8':
return '';
case '9':
return '9';
case '10':
return '';
case '11':
return '';
case '12':
return '12';
case '13':
return '';
case '14':
return '';
case '15':
return '15';
case '16':
return '';
case '17':
return '';
case '18':
return '18';
case '19':
return '';
case '20':
return '';
case '21':
return '21';
case '22':
return '';
case '23':
return '';
case '24':
return '24';
}
}
},
title: { //仪表盘标题
show: 1,
offsetCenter: ['250%', '-250%'],
textStyle: {
color: '#333',
fontSize: 24,
fontWeight: 'bold'
}
},
detail: { //仪表盘显示数据
show: 0,
formatter: '{value}',
offsetCenter: [0, '60%']
},
data: [{
name: '当前时间:\n'
}]
},{ ///小表盘星期
name: '星期',
type: 'gauge',
center: ['72%', '50%'], // 默认全局居中
radius: '22%', //仪表盘半径
min: 0,
max: 7,
startAngle: 90,
endAngle: -269.9999,
splitNumber: 7,
animation: 0,
pointer: { //仪表盘指针
show: true,
length: '80%',
width: 3
},
itemStyle: { //仪表盘指针样式
normal: {
color: '#00b0b0',
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10,
shadowOffsetX: 2,
shadowOffsetY: 2
}
},
axisLine: { //仪表盘轴线样式
lineStyle: {
color: [
[0.07, 'rgba(192, 0, 0, 0.5)'],
[0.21, 'rgba(0, 0, 192, 0.5)'],
[0.35, 'rgba(0, 64, 192, 0.5)'],
[0.50, 'rgba(0, 96, 192, 0.5)'],
[0.64, 'rgba(0, 164, 192, 0.5)'],
[0.78, 'rgba(0, 128, 64, 0.5)'],
[0.93, 'rgba(192, 128, 0, 0.5)'],
[1, 'rgba(192, 0, 0, 0.5)']
],
width: 18
}
},
splitLine: { //分割线样式
show: 0,
length: 18,
lineStyle: {
width: 1
}
},
axisTick: {
show: 0
}, //仪表盘刻度样式
axisLabel: { //刻度标签
show: 1,
distance: -15, //标签与刻度线的距离
textStyle: {
color: '#ffffff'
},
formatter: function(t) {
return ''
// switch (t + '') {
// case '0':
// return '7';
// case '1':
// return '1';
// case '2':
// return '2';
// case '3':
// return '3';
// case '4':
// return '4';
// case '5':
// return '5';
// case '6':
// return '6';
// case '0':
// return '{w0|星期日}';
// case '1':
// return '星期一';
// case '2':
// return '星期二';
// case '3':
// return '星期三';
// case '4':
// return '星期四';
// case '5':
// return '星期五';
// case '6':
// return '星期六'; //这里的汉字怎么随着这个圆的弧度显示而不是水平显示
// }
},
// rich: {
// w0: {
// transtion: 'rotate(30deg)'
// }
// }
},
title: {
show: 0
}, //仪表盘标题
detail: {
show: 0
}, //仪表盘显示数据
data: [{}],
z: 0
}, { ///小表盘月
name: '月份',
type: 'gauge',
center: ['50%', '72%'], // 默认全局居中
radius: '22%', //仪表盘半径
min: 0,
max: 12,
startAngle: 90,
endAngle: -269.9999,
splitNumber: 12,
animation: 0,
pointer: { //仪表盘指针
show: 1,
length: '90%',
width: 3
},
itemStyle: { //仪表盘指针样式
normal: {
color: '#00b0b0',
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10,
shadowOffsetX: 2,
shadowOffsetY: 2
}
},
axisLine: { //仪表盘轴线样式
lineStyle: {
color: [
[1, '#337ab7']
],
width: 6
}
},
splitLine: { //分割线样式
show: 1,
length: 6,
lineStyle: {
width: 1
}
},
axisTick: {
show: 0
}, //仪表盘刻度样式
axisLabel: { //刻度标签
show: 1,
distance: 1, //标签与刻度线的距离
textStyle: {
color: '#0000ff',
fontFamily: '宋体'
},
formatter: function(t) {
switch (t + '') {
case '2':
return '2';
case '4':
return '4';
case '6':
return '6';
case '8':
return '8';
case '10':
return '10';
case '12':
return '12';
}
}
},
detail: {
show: 0
}, //仪表盘显示数据
data: [{}]
}, { ///小表盘日
type: 'gauge',
center: ['50%', '72%'], // 默认全局居中
radius: '22%', //仪表盘半径
animation: 0,
pointer: {
width: 0
}, //仪表盘指针
axisLine: { //仪表盘轴线样式
lineStyle: {
show: 0,
width: 0
}
},
splitLine: {
show: 0
}, //分割线样式
axisTick: {
show: 0
}, //仪表盘刻度样式
axisLabel: {
show: 0
}, //刻度标签
detail: { //仪表盘显示数据
show: 1,
formatter: function(e) {
if (e < 10)
e = '0' + e;
return e;
},
offsetCenter: ['160%', 0],
borderWidth: 2,
borderColor: '#337ab7',
backgroundColor: '#fff',
height: 20,
width: 28,
textStyle: {
color: '#f60',
fontSize: 16,
fontWeight: 'bold'
},
},
data: [{}]
}, { ///大表盘时针
name: '小时',
type: 'gauge',
radius: '90%', //仪表盘半径
min: 0,
max: 12,
startAngle: 90,
endAngle: -269.9999,
splitNumber: 12,
animation: 0,
pointer: { //仪表盘指针
length: '70%',
width: 6
},
itemStyle: { //仪表盘指针样式
normal: {
color: '#109A39',
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10,
shadowOffsetX: 2,
shadowOffsetY: 2
}
},
axisLine: { //仪表盘轴线样式
show: 0,
lineStyle: {
color: [
[1, '#337ab7']
],
width: 10,
shadowColor: 'rgba(0, 0, 0, 0.8)',
shadowBlur: 12,
shadowOffsetX: 3,
shadowOffsetY: 3
}
},
splitLine: { //分割线样式
length: 10,
lineStyle: {
width: 2
}
},
axisTick: { //仪表盘刻度样式
show: true,
splitNumber: 5, //分隔线之间分割的刻度数
length: 5, //刻度线长
lineStyle: {
color: ['#ffffff']
}
},
axisLabel: {
show: 0
}, //刻度标签
title: {
show: 0
}, //仪表盘标题
detail: {
show: 0
}, //仪表盘显示数据
data: [{}]
}, { ///大表盘分针
name: '分钟',
type: 'gauge',
radius: '90%', //仪表盘半径
min: 0,
max: 60,
startAngle: 90,
endAngle: -269.9999,
splitNumber: 12,
animation: 0,
pointer: { //仪表盘指针
length: '85%',
width: 6
},
itemStyle: { //仪表盘指针样式
normal: {
color: '#ca8622',
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10,
shadowOffsetX: 2,
shadowOffsetY: 2
}
},
axisLine: { //仪表盘轴线样式
show: 0,
lineStyle: {
width: 0
}
},
splitLine: { //分割线样式
length: 10,
lineStyle: {
width: 2
}
},
axisTick: { //仪表盘刻度样式
show: true,
splitNumber: 5, //分隔线之间分割的刻度数
length: 5, //刻度线长
lineStyle: {
color: ['#ffffff']
}
},
axisLabel: {
show: 0
}, //刻度标签
title: {
show: 0
}, //仪表盘标题
detail: {
show: 0
}, //仪表盘显示数据
data: [{}]
}, { ///大表盘秒针
name: '秒',
type: 'gauge',
radius: '90%', //仪表盘半径
min: 0,
max: 60,
startAngle: 90,
endAngle: -269.9999,
splitNumber: 12,
animation: 0,
pointer: { //仪表盘指针
show: true,
length: '95%',
width: 4
},
itemStyle: { //仪表盘指针样式
normal: {
color: '#00b0b0',
shadowColor: 'rgba(0, 0, 0, 0.8)',
shadowBlur: 10,
shadowOffsetX: 4,
shadowOffsetY: 4
}
},
axisLine: { //仪表盘轴线样式
lineStyle: {
color: [
[1, '#337ab7']
],
width: 10
}
},
splitLine: { //分割线样式
length: 10,
lineStyle: {
width: 2
}
},
axisTick: { //仪表盘刻度样式
show: 1,
splitNumber: 5, //分隔线之间分割的刻度数
length: 5, //刻度线长
lineStyle: {
color: ['#fff']
}
},
axisLabel: { //刻度标签
show: 1,
distance: 6, //标签与刻度线的距离
textStyle: {
fontWeight: 'bold',
fontSize: 16
},
formatter: function(t) {
switch (t + '') {
case '0':
return '';
case '5':
return '1';
case '10':
return '2';
case '15':
return '3';
case '20':
return '4';
case '25':
return '5';
case '30':
return '6';
case '35':
return '7';
case '40':
return '8';
case '45':
return '9';
case '50':
return '10';
case '55':
return '11';
case '60':
return '12';
}
}
},
title: {
show: 0
}, //仪表盘标题
detail: { //仪表盘显示数据
show: 0,
formatter: '{value}',
offsetCenter: [0, '60%']
},
data: [{}]
},
{ 汉字星期标注
name: '汉字星期',
type: 'pie',
hoverAnimation: false,
center: ['72%', '50%'],
radius: ['15%', '22.5%'],
startAngle: 64.28,
label: {
normal: {
show: false,
position: 'inside'
}
},
labelLine: {
normal: {
show: false
}
},
markPoint: {
symbolSize: 1,
label: {
normal: {
show: true,
formatter: function(t){
return t.name
}
}
},
data: [
{
name: '星期日',
x: '72%',
y: '41%'
},
{
name: '星期一',
x: '77.5%',
y: '44.5%',
label: {
normal: {
rotate: -51.42
}
}
},
{
name: '星期二',
x: '78.7%',
y: '52%',
label: {
normal: {
rotate: -102.84
}
}
},
{
name: '星期三',
x: '75%',
y: '58.5%',
label: {
normal: {
rotate: -154.28
}
}
},
{
name: '星期四',
x: '69%',
y: '58.5%',
label: {
normal: {
rotate: -205.7
}
}
},
{
name: '星期五',
x: '65.5%',
y: '52%',
label: {
normal: {
rotate: -257.12
}
}
},
{
name: '星期六',
x: '66.8%',
y: '44.2%',
label: {
normal: {
rotate: 51.46
}
}
}
]
},
data: [
{name: '星期日', value: 1},
{name: '星期一', value: 1},
{name: '星期二', value: 1},
{name: '星期三', value: 1},
{name: '星期四', value: 1},
{name: '星期五', value: 1},
{name: '星期六', value: 1},
],
z: 1
}
]
};
clock.setOption(option);
window.clearInterval(timeTicket);
var timeTicket = window.setInterval(() => {
var datetime = new Date();
var year = datetime.getFullYear();
var month = datetime.getMonth() + 1;
var date = datetime.getDate();
var h = datetime.getHours();
var m = datetime.getMinutes();
var s = datetime.getSeconds();
var week = datetime.getDay();
var ms = datetime.getMilliseconds();
var minutes = m + s / 60;
var hours_24 = h + m / 60;
var hours_12;
if (hours_24 > 12){
hours_12 = hours_24 - 12;
}
else{
hours_12 = hours_24;
}
var seconds = s + ms / 1000;
var cur_mon = new Date(year, month, 0);
var cur_mon_count = cur_mon.getDate(); //当前月份总天数
var month = month + date / cur_mon_count;
if (month > 12){
month = month - 12;
}
var strmonth = datetime.getMonth() + 1;
var str = year + "-" + checktime(strmonth) + "-" + checktime(date) + " "+ checktime(h) + ":" + checktime(m) + ":" + checktime(s);
option.series[0].data[0].name = '当前时间:\n' + str;
option.series[0].data[0].value = (hours_24).toFixed(2);
option.series[1].data[0].value = (week).toFixed(0);
option.series[2].data[0].value = (month).toFixed(2);
option.series[3].data[0].value = (date).toFixed(0);
option.series[4].data[0].value = (hours_12).toFixed(2);
option.series[5].data[0].value = (minutes).toFixed(2);
option.series[6].data[0].value = (seconds).toFixed(2);
clock.setOption(option, true);
}, 100);
function checktime(str){
if(str < 10){
return '0' + str;
}
return str;
}
}
}
}
</script>
<style>
.main {
}
.main-left{
float: left;
width: 55%;
background: #E5E5E5;
}
.main-right{
float: left;
width: 45%;
}
</style>
总结
提示：如果你显示不出效果或者报错了，注意检查图片路径和world.js路径是否能访问、第三方包是否有依赖。
踩坑总结：很多在原生js能运行的函数在vue中是不能直接用的，例如本文中的clearInterval，在vue中有可能要window.clearInterval才能使用，在 series里写比较复杂的color需要用[]括起来(例如水球图的线性渐变)，否则在vue中也是无法使用。
339
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
