For more articles, please follow my personal blog: https://seven777777.github.io/myblog/
For a front-end developer working in a big data company, in addition to maps, the most common requirement in recent years is for various charts. Basically, Echart, as a charting library, can meet the charting needs of most projects. BUT ~ Conventional configurations are basically unable to meet the high-end taste of most products, so ~ it is inevitable that you will also encounter some personalized configuration requirements.
Maybe it’s because I’m older and it’s not so good. You also know that the frequency of some particularly personalized configurations is very low. Basically, they are configured once and then left there. Wait until the next time you suddenly find a similar configuration requirement. , as a programmer's instinctive reaction is to dig out the original configuration for reference. However, due to the large volume of projects in recent years, several database migrations and various twists and turns during this period, the search process was very difficult, so this project was born.
The version that is currently online only lists the centralized configurations encountered so far. In the future, we will continue to look back on previous projects to add configuration lists, and we will also make some structural improvements in the process.
The project can be accessed through this link: https://seven777777.github.io/vue-echarts/#/home
The source code is here: https://github.com/seven777777/vue-echarts
The project preview is as follows:
About project deployment
Project technology stack: @vue/cli 4.5.9 + echarts + elementui
For deploying the project to GitHub and implementing preview, there are the following precautions:
- view.config.js
module.exports = {
publicPath: './',//设置后，打包后的资源路径引用才正确
outputDir: './docs',//方便github设置预览页面
};
- router
Preview the vue packaging project on github. The routing mode should be the default hashmode and cannot behistory
tips: After vue-cli was upgraded to 4, sass-loader was upgraded from v7 to v8.
About dynamic rendering components
In order to be more flexible for future iterations of the project, the current list uses components uniformly and does not register routes. Since there may be more components in the future, for the convenience of operation, dynamic rendering components are used here.
The core code implemented is as follows:
Project directory:
The file in the red box is the location where all subsequent list components are stored, as well as the js file for dynamic rendering component configuration.
// componentsSet.js
const resultComps = {}
let requireComponent = require.context(
'./', // 在当前目录下查找
false, // 不遍历子文件夹
/\.vue$/ // 正则匹配 以 .vue结尾的文件
)
requireComponent.keys().forEach(fileName => {
let comp = requireComponent(fileName)
resultComps[fileName.replace(/^\.\/(.*)\.\w+$/, '$1')] = comp.default
})
export default resultComps
// vue
<!--dom-->
<component
v-for="(comp,index) in dataList"
:key="index"
:title="comp.label"
:is="allComps[comp.component]">
</component>
// :title="comp.label" 可以向动态组件传参
<!--js-->
import allComps from './components/componentsSet'
export default {
name: 'Home',
data(){
return {
allComps,
// ⚠️注意：组件文件名与此处的component需要对应
dataList:[
{
label:'基本说明',
component:'baseDesc'
},
{
label:'基础图表',
component:'baseChart'
},
{
label:'legend-外部设置点击事件',
component:'legendClickDiy'
},
{
label:'tooltip-自定义样式',
component:'diyTooltip'
},
{
label:'tooltip-默认显示并轮播显示',
component:'defaultShowTooltip'
},
// ...
]
}
},
// ...
}
About the project introduction
The current encapsulated basic charts are relatively simple. For other commonly used configurations, you can directly query the Echarts official website.
For ease of use, this project encapsulates a global public Echarts component. The encapsulated component exposes some methods, which can be used when calling components, such as mouse events and action events.
Based on a lot of project experience, the following data structures are easier to encapsulate when a large number of charts appear on the page.
so~ The chart packaging of this project, unless otherwise specified, uses the following data structure: (Currently, only the data structures of rectangular coordinate system charts and pie charts are listed, and additional chart types will be added in the future)
//数据结构-直角坐标系
baseChartsObj:{
xAxisData:["分类1", "分类2", "分类2", "分类4", "分类5", "分类6"],
chartData: [
{
name: '数据1',
value:[12,18,34,26,67,10],
type: 'line'
},
{
name: '数据2',
value:[16,11,14,36,57,20],
type: 'bar'
},
// 基本配置的基础上，之后的一些示例会增加一些其他配置，如：单位，色值
{
name: '数据3',
value:[6,11,24,16,11,30],
type: 'line'
// unit: '个',
// color: somecolor,
}
]
}
//数据结构-饼图
pieChartsObj:{
title:'基础饼图',
unit:'%',
chartData:[
{value:26, name: '分类1'},
{value:23, name: '分类2'},
{value:12, name: '分类3'},
{value:12, name: '分类4'},
{value:12, name: '分类5'}
]
}
List the portal again~
The project can be accessed through this link: https://seven777777.github.io/vue-echarts/#/home
The source code is here: https://github.com/seven777777/vue-echarts
At present, direct access to the project is mainly to facilitate quick search of some configurations. Listed are some core implementation codes. (If you want to see the complete implementation code, you can go to my github to see the source code.) If you have no previous experience in using Echarts, It is recommended to familiarize yourself with the official configuration first.
In the future, I may write some blog tutorials specifically for some of the more classic and commonly used complex DIY configurations of Echarts.
Anyway, if you like this project of mine, please star it, forward it and add it to your favorites!
