echarts在vue中使用的感悟
echarts作為圖表展示的強大存在，每當使用后台系統，或多或少都會使用到，但是作為菜鳥的我，則是一路采坑，各種頭大，比比皆是，為了避免下次再犯同樣的錯誤，特意記錄下來，與大家共勉之
闡述我的圖表樣式
- 柱狀圖
最原始的圖形
更改后的樣式
option = {
tooltip: { //觸發鼠標經過 彈窗
show: true,
trigger: 'axis'
},
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
},
yAxis: {
type: 'value'
},
series: [{
data: [120, 200, 150, 80, 70, 110, 130],
type: 'bar',
barWidth: '40', //柱形圖寬度
itemStyle: {
normal: {
color: 'pink', //背景色
label: { // 在柱形圖上顯示具體數據
show: true,
position: 'top', // 所在的位置
textStyle: { // 數據展示的樣式
fontSize: '20',
fontWeight: 'bold',
color: 'skyblue'
}
},
}
}
}]
};
通過修改后便可以達到相應的效果，但是官方文檔太多，又沒有明顯的注釋，指定那是哪，看起來很痛苦。原本這些不難，但是有些用法不能按自己的思維推，只能踩坑 ==> 看文檔 ==> 踩坑
進入重點，談談 彈框 tooltip這點事
tooltip可以在多個狀態下使用， 全局 ，局部數據 都可以 ，今天只提全局中數據展示這塊，都大同小異,tooltip中的一個重要現實數據的屬性formatter- 字符串類型， 可以通過嘗試就可以試出來
- 函數類型
此時重點提提這個函數類型
formatter(parmas, ticket, callback) {}
params可以直接打印出來看看，series里的數據ticket異步回調標識 ，只是不理解為什么加這個東西，之后了解到，作用類似id，起到指定這個回調函數跟這個是一起，指定唯一callback寫業務邏輯，官方說話是 數據請求后獲取，但是個人發現，顯示的內容跟字符串方法顯示結果一樣，只是數據晚回來而已。 如果數據並不在series中呢，甚至沒有多大關系，哪該怎么辦？？？
問題拋出：如何做到彈窗數據跟
series中不存在明顯聯系
- 為了這個問題，我已連續幾日各種搜索，各種逛論壇，看原創作者視頻，都沒有找到有效路徑，知道那天與同事溝通，他忽然提了一句，通過索引進行關聯，瞬間前途一片光明
export default{
data() {
return {
data: [ // 制造假數據
{axisData: '周一', seriesData: 11, formatterData: 1},
{axisData: '周二', seriesData: 22, formatterData: 2},
{axisData: '周三', seriesData: 33, formatterData: 3},
{axisData: '周四', seriesData: 44, formatterData: 4},
{axisData: '周五', seriesData: 55, formatterData: 5},
{axisData: '周六', seriesData: 66, formatterData: 6},
{axisData: '周日', seriesData: 77, formatterData: 7}
],
formatterDataList: [],
myecharts: '', //實例
option: {
tooltip: { //觸發鼠標經過 彈窗
show: true,
trigger: 'axis',
formatter(params) {}
},
xAxis: {
type: 'category',
data: [],
},
yAxis: {
type: 'value'
},
series: [{
type: 'bar',
data: [],
}]
}
}
},
created() {
this.getData()
},
mounted() {
// 初始化
this.myecharts = echarts.init(this.$refs.charts)
this.myecharts.setOption(this.option)
const that = this
window.addEventListener('resize', function() {
that.myecharts.resize()
})
},
methods: {
/**
* 數據獲取
*/
getData() {
const data = this.data
let axisData = [],
seriesData = [],
formatterData = []
for (let i = 0, leng = data.length ; i < leng - 1; i++ ) {
let item = data[i]
axisData.push(item.axisData)
seriesData.push(item.seriesData)
formatterData.push(item.formatterData)
}
this.option.xAxis.data = axisData
this.option.series[0].data = seriesData
this.formatterDataList = formatterData
this.showData()
},
/**
* 業務邏輯處理
*/
showData() {
const that = this
this.option.tooltip.formatter = function(params) {
// console.log(params)
const index = params[0].dataIndex, // 因為索引唯一，正好通過這個進行關聯
data = that.formatterDataList
let res = `數據顯示: ${data[index]}`
return res
}
}
}
}
主要是如何找到數據之間的關聯性，只要找到一切都好說了
總結
把我覺得可以文檔視頻放在這，大家可以參考哈
- http://echarts.baidu.com/index.html 3.0以后的
- http://echarts.baidu.com/echarts2/doc/doc.html 2.0之前的 （雖然echarts更新了，但是這個看的清晰點）
- https://study.163.com/course/courseMain.htm?courseId=1016007 原創作者講的 挺好的，很詳細
- https://www.w3cschool.cn/echarts_tutorial/echarts_tutorial-9m4j2c67.html 中國的w3cscholl
- https://www.oschina.net/question/tag/echarts 開源中國
一下子想學好，確實難，得學會如何查找，如何嘗試，大家一起加油