一、Echarts 按需加載
有兩種方式可以實現按需加載。
第一種：
- 專門設置一個echarts配置文件
// 文件路徑 @/lib/echarts.js 自行配置
// 引入 ECharts 主模塊
var echarts = require('echarts/lib/echarts');
// 引入柱狀圖等
require('echarts/lib/chart/bar');
require("echarts/lib/chart/line");
require("echarts/lib/chart/pie");
// 引入提示框和標題組件
require('echarts/lib/component/tooltip');
require('echarts/lib/component/title');
require("echarts/lib/component/dataZoom");
require("echarts/lib/component/markPoint");
require("echarts/lib/component/markLine");
export default echarts
需要引入什么，參考這個地址：https://github.com/apache/incubator-echarts/blob/master/index.js
- 在需要的組件內加載echarts，繪制圖表
<template>
<div id="myChart" ref="myChart"></div>
</template>
<script>
import {skillOption} from './option/skillAnalyOption'
// 重點：此位置引入的是你單獨配置的echarts
import echarts from '@/lib/echarts'
export default {
mounted() {
// 調用繪制圖表的方法
this.draw();
let that = this;
window.onresize = function () {
that.pracChart.resize();
that.skillChart.resize();
that.pieChart.resize();
that.histogramChart.resize();
}
},
methods: {
draw () {
// 實例化echarts對象
this.pieChart= echarts.init(this.$refs.myChart)
//下面是具體的配置
this.pieChart.setOption(skillOption);
//綁定的一些事件
this.pieChart.on('mouseover', (params) => {
this.changeId = params.name
this.getHistogramChartData(this.cur2, this.changeId)
});
},
getPrcData () {
this.pracChart.setOption({
xAxis: {
data: this.PrcData.date
},
series: [{
data: this.PrcData.hour //將異步請求獲取到的數據進行裝載
}]
})
},
}
}
</script>
第二種方式：
引入插件babel-plugin-equire,配合實現Echarts按需引入
- 下載babel-plugin-equire
npm install babel-plugin-equire -D
- 在.babelrc文件中的配置
"plugins": [
"... 其他插件",
"equire"
]
項目中是這樣配置的：
"plugins": [
["transform-runtime",
{
"polyfill": false
}
],
"equire"
],
- 修改@/lib/echarts文件
const echarts = equire([
// 寫上你需要的
'bar',
'line',
'pie',
'radar',
'legend',
'title',
'markLine',
'dataZoom'
])
export default echarts
二、折線圖、柱狀圖、餅圖、雷達圖樣式修改
-
折線圖
10d2d18125042b8a679b482c9d0a88f.png
import echarts from 'echarts'
export const praOption = {
dataZoom: [ //x軸區域縮放
{
type: 'slider', //圖表下方的伸縮條
show: true,
realtime: true,
start: 0,
end: 100,
handleIcon:"M0,0 v9.7h5 v-9.7h-5 Z",
handleStyle:{ /*手柄的樣式*/
color:"yellow",
borderColor:"transparent"
},
backgroundColor:"transparent", /*背景 */
fillerColor:"rgba(255,255,255,0.2)", /*被start和end遮住的背景*/
},
{
type: 'inside', //鼠標滾輪
realtime : true
},
],
xAxis: {
type: 'category',
boundaryGap: false,
data: [],
axisLine:{
lineStyle:{
color:'#fff',
width:1,// 改變坐標線的顏色
}
}
},
yAxis: {
type: 'value',
//去掉默認的線
splitLine: {
show: false
},
axisLine:{
lineStyle:{
color:'#fff',
width:1,// 改變坐標線的顏色
}
}
},
series: [{
data: [],
type: 'line',
areaStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: 'rgba(225,255,255,.3)'
}, {
offset: 1,
color: 'rgba(255, 255, 255,.1)'
}])
}
},
markLine: {
silent: true,
data: [{
yAxis: 6,
lineStyle:{
color: 'yellow'
},
}, {
yAxis: 11,
lineStyle:{
color: '#3bf2e7'
},
}]
},
//修改折線圖線的顏色
itemStyle:{
normal:{
color : "#fff", // 圖表中各個圖區域的邊框線拐點顏色
lineStyle:{
color:'rgba(255,255,255,.5)' // 圖表中各個圖區域的邊框線顏色
}
}
},
}]
}
//折線圖
this.pracChart.setOption({
xAxis: {
data: this.PrcData.date
},
series: [{
data: this.PrcData.num
}]
})
-
柱狀圖
c89f939dde513dcdd2af00dbfcf45f7.png
export const histogramOption = {
tooltip : {
trigger: 'axis'
},
legend: {
data:['65分基線','75分基線']
},
toolbox: {
itemSize:0, //去掉頂部自帶的功能按鈕
show : true,
feature : {
dataView : {show: true, readOnly: false},
magicType : {show: true, type: ['line', 'bar']},
restore : {show: true},
saveAsImage : {show: true}
}
},
calculable : true,
xAxis : [
{
type : 'category',
data : []
}
],
yAxis : [
{
type : 'value',
//去掉默認的線
splitLine: {
show: false
}
}
],
series : [
{
name:'65分基線',
type:'bar',
data:[],
itemStyle:{
normal:{
color:'#B2DAFE'
}
}
},
{
name:'75分基線',
type:'bar',
data:[],
itemStyle:{
normal:{
color:'#78BDFE'
}
}
},
{
name:'自己',
type:'bar',
data:[],
itemStyle:{
normal:{
color:'#F18180'
}
}
}
]
}
//柱狀圖
this.histogramChart.setOption({
xAxis : [
{
data : filterData[key].type
}
],
series : [
{
data: filterData[key]['65']
},
{
data: filterData[key]['75']
},
{
data: filterData[key]['self']
}
]
})
-
餅狀圖
57d121f60bbb8035f7ac90f505d8630.png
export const pieOption = {
legend: {
orient: 'horizontal',
width: 180,
x: 'center',
y: '72%',
itemWidth: 10,
itemHeight: 10,
itemGap: 10,
data: ['Speaking','Listening','Writing','Reading']
},
series : [
{
name: '訪問來源',
type: 'pie',
radius : '55%',
center: ['50%', '40%'],
data: [],
itemStyle: {
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
},
// 餅狀圖顯示數據
normal:{
label:{
show:true,
position: 'inner', //讓餅狀圖百分比在區域內顯示
formatter:'ky6nb1t%'
},
labelLine:{
show:false
}
}
}
}
],
color: ['#B691F1','#3FA2FD','#FCAAC0','#3AF2E8']
}
//餅狀圖
this.pieChart.setOption({
series: [{
data: this.PieData
}]
})
-
雷達圖
1af6ac87dfc64c326f8b852df3db4a7.png
export const skillOption = {
radar: {
name: {
textStyle: {
color: 'rgba(255,255,255,.8)',
borderRadius: 3
}
},
indicator: [
{ name: 'Grammar', max: 100},
{ name: 'Oral Fluency', max: 100},
{ name: 'Pronunciation', max: 100},
{ name: 'Spelling', max: 100},
{ name: 'Vocabulary', max: 100},
{ name: 'Written Discourse', max: 100}
],
splitArea : {
show : true,
areaStyle : {
color: ['transparent', 'transparent', 'transparent'] // 圖表背景網格的顏色
}
},
splitLine : {
show : true,
lineStyle : {
width : 1,
color : 'rgba(255,255,255,0.3)' // 圖表背景網格線的顏色
}
}
},
series: [{
type: 'radar',
data : [],
itemStyle: {
normal: {
color : "rgba(255,255,255,.8)", // 圖表中各個圖區域的邊框線拐點顏色
lineStyle: {
color:"transparent" // 圖表中各個圖區域的邊框線顏色
},
areaStyle: {
color : 'rgba(250,250,250,0.3)'
}
}
}
}]
}
//雷達圖
this.skillChart.setOption({
series: [{
data: [
{
value : this.skillAnalData.data.analyse,
label: {
normal: {
show: true,
formatter:function(params) {
return params.value;
}
}
},
areaStyle: {
normal: {
opacity: 0.9,
color: new echarts.graphic.RadialGradient(0.5, 0.5, 1, [
{
color: 'rgba(0,255,255,.4)',
offset: 0
},
{
color: 'rgba(0,255,255,.1)',
offset: 1
}
])
}
}
}
]
}]
})
-
倒起來的柱狀圖配置
1f68d753506d0a219f3cc5511523955.png
const CommunicativeSkills = ['Writing','Speaking','Reading','Listening']
export default {
grid: {
left: '3%',
right: '4%',
bottom: '10%',
containLabel: true
},
xAxis: {
type: 'value',
boundaryGap: [0, 0.01],
splitLine: {
show: false
},
min: 10,
max: 90,
interval: 4
},
yAxis: {
type: 'category',
data: ['Written Discourse','Vocabulary','Spelling','Pronunciation','Oral Fluency',
'Grammar','Enabing Skills','Writing','Speaking','Reading','Listening','Communicative Skills'],
axisLabel: {
margin: 10,
fontWeight: '600',
textStyle: {
color: function (value, index) {
if (value === 'Enabing Skills' || value === 'Communicative Skills') {
return '#448AFF'
} else {
return '#515151'
}
}
}
},
axisTick: {
show: true,
alignWithLabel: true,
interval: function (index, value) {
if (value === 'Enabing Skills' || value === 'Communicative Skills') {
return false
} else {
return true
}
}
}
},
series: [
{
name: 'skills',
type: 'bar',
data: [],
label: {
show: true,
position: 'right',
color: '#515151'
},
itemStyle:{
normal:{
color:function (value) {
if (CommunicativeSkills.indexOf(value.name) === -1) {
return '#96CBFA'
} else {
return '#448AFF'
}
}
}
},
markLine: {
label: {
show: true,
position: 'end',
formatter: 'Overall Scale:{c}',
fontWeight: '600',
color: '#5C6E81'
},
symbol: '', //去除兩端的箭頭
silent: true,
data: []
},
}
]
}
//視圖
this.finalScore = [...dataEnn,'',...dataCom,'']
this.scoreChart.setOption({
series: [{
data: this.finalScore, //將異步請求獲取到的數據進行裝載
markLine: {
data: [{
xAxis: this.averageScore,
lineStyle:{
type: 'solid',
color: '#355888',
width: 2
}
}]
}
}]
})
