Echarts 多色文字设置

本文详细讲解了如何使用ECharts进行图例配置，包括图例形状的选择（如circle, rect等）、图例文字颜色与图例形状一致性的设置，以及如何实现图例文字多种颜色的配置。

在vue项目中使用到echarts绘制图表时使用到dataZoom来选择展示某个时间区间的数据，由UI测试后发现把手柄拖拽到开始和结束时，显示的文本会被遮挡： 产品给出的解决方法是当拖到最后的时候将这个文本显示在滑块的内侧，或者是上方，避免被遮挡住；但是去看了echarts的文档

 这里用的echarts版本是5.3.2，以福建省的的地图为例，页面进入时地图块开始轮播高亮，鼠标移入地图块停止轮播，鼠标移出地图块继续轮播高亮 实现效果： 实现代码如下：

如果想要以上echarts图形完整代码，可以访问 https://gitee.com/abcdfdewrw/echarts_library

本文详细讲解了如何使用ECharts进行图例配置，包括图例形状的选择（如circle, rect等）、图例文字颜色与图例形状一致性的设置，以及如何实现图例文字多种颜色的配置。

背景： 产品提出需求在饼图中间放两行文字且居中 “简单，劈劈啪啪写完了” 产品再提出你这个没有自适应啊，屏幕放大、缩小你这个就没有居中了，甚至会和饼图重叠 “emmmmm…\\\" 方案一：使用tittle（不能自适应） 方案二：在series中配置label（适用图表居中的情况，我这个

1、代码 注意： 1）、文字显示不全         解决：            1、 radius: \\\'65%\\\',   // 设置这个文字少的情况下可解决            2、 上诉代码formatter这个方法，可解决文字过长进行换行展示 2）、indicator中可以设置max值

效果图 如果是在x轴上的，就在x轴上添加 triggerEvent: true, 如果是y轴就在y轴添加，我是在y轴上添加的 并且自定义的方法（我取名为 extension ） 然后我放在末尾引入的 数据格式

记录一下在公司遇到的一些功能，以及相关实现 以上的内容我花了一周时间去实现的，自己也觉得时间很长，但主要因为很少使用ECharts，导致使用的过程中大部分的时间都在查文档。 对于上面的这些功能点，其实算是写了两遍吧，这周一开了个Code Review，因为涉及到公共组

效果图如下 主要代码如下：

        在前端开发任务中使用echarts柱状图时，会出现x轴某项文字太长了这种情况，那么echarts柱状图x轴文字太多如何解决？办法是超出省略显示成点就行效果图看下图所示，在x轴的axisLabel里加一个formatter函数,index等于3表示字数为3个超出就显示成点。 rotate: 30, 倾斜30度

前景： uniapp开发小程序项目时，对于iconfont多色图标无法直接支持；若将多色icon下载引入项目则必须关注包体，若将图标放在oss或者哪里管理，加载又是一个问题，因此大多采用iconfont-tools工具，但是iconfont-tools使用需要下载iconfont-tools工程进行编译转换，过于繁琐，因此我在

原图： 需要实现的效果： 需要设置xAxis和yAxis里的 axisLine 以及axisTick 图背景的横向每一条白线都改变颜色，需要设置 yAxis的splitLine里的lineStyle 只需要在 series 中添加 smooth: true ，即可 示例代码 smooth 还有其他的值 当type为line时 smooth 表示 是否平滑曲线显示。 如果是

方法一：给每个data加边框，边框颜色和echarts所在的背景一样 方法二（推荐）：给每个数据中插入颜色为透明的假数据，注意：假数据要根据真实数据调整

var myChart = ec.init(document.getElementById(\\\'main\\\')); let option = { tooltip: { trigger: \\\'item\\\', }, dataRange: {//左下角的颜色块。start：值域开始值；end：值域结束值；label：图例名称；color：自定义颜色值 x: \\\'left\\\', y: \\\'bottom\\\', show:false, splitList: [ // 此处根据下方data中的value值来显示不同的颜色 {start: