前言我刚工作半年，第一次接到绘制饼图和柱状图的需求，或多或少都会有些害怕未知的事物。于是问了师傅，师傅直接把vue-echarts文档和echarts文档dump给我了，还说这样会好读，但是。。。刚上来的时候还是有点懵，所以就这样了有必要记录下来。相关链接vue-echartsgithub文档echarts官方文档思路为什么要用vue-echarts？直接用echarts不好吗？按照echarts的官方文档，绘制一个图标，首先要新建一个容器，然后在JS中通过getElementById获取容器。这是js和html最原始的交互方式，不符合经常使用vue开发的同学的使用习惯。所以vue-echarts将echarts获取元素的代码封装起来，变成了一个组件。平均来说，每张图可以让我们少写十行左右的代码。vue-echarts最重要的就是完成这个使命。剩下的图表配置项，我们要学会自己看echarts文档了。实现步骤1.了解原生Echarts先来看看原生Echarts是如何创建容器的-->5分钟入门ECharts2，引入vue-echarts，echartsnpm安装echartsvue-echarts3，在.vue文件中调用vue-echarts4.学习基础Echarts的概念接下来我们需要对Echarts的基本概念有个大概的印象-->ECharts基本概念概述5.模仿例子根据Echarts官方给的例子，找类似的熟悉基本概念-->官方示例如下图所示。您可以在边栏中选择主要类别。下面介绍最常用的饼图、直方图等，点击效果图进入代码页。6.自定义配置如果按照上面的步骤一步一步来，至此，我们心里就??有了一个大概的谱。接下来我们需要根据Echarts的配置项自定义实现，UI设计稿-->配置项看到这么多配置项，是不是又晕了？这个工具提示显示在哪里，这个网格有什么用？这个时候我们再回头看看基本概念的图：我能再做一次。7、一点一滴美化。刚开始接触Echarts，肯定有很多奇怪的问题。为什么这张图这么不听话，溢出界面了？这些数据是如何堆积在一起的？这么难看。这个时候没有捷径，只能慢慢摸索，慢慢debug，耐心点，很快就会出一张好看的图~这里是我遇到的一个很难实现的设计稿：这里有两个难点:数据选项。每个值对应两种不同的解释，都威胁到人数>1000和超大。同一条数据上下行的背景颜色和字体颜色互换。一开始拿到这张图的时候，内心OS：看起来不错，但是真的可以实现吗？在第一个版本中，我只是把数据丑陋地放在那里，反正不影响主要功能。然后有一天没需求，看了看Echarts官方的实例，突然有了灵感。这里主要用到两个配置：series-pie.label.formatterseries-pie.label.richpieOption:{grid:{left:'center',top:40,containLabel:true},color:['#8676F8','#99CDFD','#3FE8BD','#FA9DA6'],series:[{type:'pie',radius:'48%',//radius:[20,70],data:[{name:'威胁数量ofpeople>1000'},{name:'受威胁人数<10人'},{name:'受威胁人数>10人'},{name:'受威胁人数>100人'},],label:{lineHeight:15,formatter:function(params){vartypevarstyleswitch(params.name){case'威胁人数>1000人':type='extralarge';风格='xl';休息;case'威胁人数>100人':type='large';样式='l';休息;case'威胁人数>10人':type='medium';风格='我';休息;case'威胁人数<10人':type='small';风格='休息;}返回params.name+'\n'+'{'+style+'|'+type+':'+params.value+'place}'},rich:{xl:{color:'#FFFFFF',backgroundColor:'#8676F8',padding:[2,4],borderRadius:2},l:{color:'#FFFFFF',backgroundColor:'#FA9DA6',padding:[2,4],borderRadius:2},m:{color:'#FFFFFF',backgroundColor:'#3FE8BD',填充:[2,4],边界半径:2},s:{color:'#FFFFFF',backgroundColor:'#99CDFD',padding:[2,4],borderRadius:2}}}}]},当当~最终实现的样式文章到此结束，内容为不是特别深入，如果对你有帮助，请点赞收藏，谢谢~
