echarts图表主题--马卡龙macarons--自己配置主题颜色

忘是亡心i 2023-06-27 11:18 144阅读 0赞

用过echarts的人都几道，他的官网风格颜色对比强烈，这样儿式的：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h1YW5odWFuMDM_size_16_color_FFFFFF_t_70]  
大多时候和你的项目风格难免冲突，它有一些风格配置，我觉得马卡龙这个配色就很好：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h1YW5odWFuMDM_size_16_color_FFFFFF_t_70 1]  
当然，既然是配置项，肯定不止这一种好看的，在官网上找到文档里的echarts样式编辑，里面有一个主题编辑器[编辑器入口][Link 1]，打开如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h1YW5odWFuMDM_size_16_color_FFFFFF_t_70 2]  
看左边框选的地方，都是官方进行的配色方案，都挺好看的，完全可以满足需求，如果觉得实在无法满足，也可以看下面的配置菜单，自己配颜色，完了之后上面有一个导出配置，是一个.json文件，把这个文件放进你的项目里，用的时候引入：

// 假设主题名称是 "vintage"
    $.getJSON('xxx/xxx/vintage.json', function (themeJSON) {
        echarts.registerTheme('vintage', JSON.parse(themeJSON))
        var chart = echarts.init(dom, 'vintage');
    })

然后你就能看到灰常美丽的图表了。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h1YW5odWFuMDM_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200106141002172.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h1YW5odWFuMDM=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h1YW5odWFuMDM_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200106141453399.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h1YW5odWFuMDM=,size_16,color_FFFFFF,t_70
[Link 1]: https://echarts.baidu.com/theme-builder/#acc-legend-body
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h1YW5odWFuMDM_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20200106141735930.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h1YW5odWFuMDM=,size_16,color_FFFFFF,t_70