目录

1.图表数据过多导致浏览器卡顿

2.Y轴数据添加单位

3.带圆角及柱状背景的柱状图

4.legned 图例超出部分显示省略号

5.柱状图 / 拓扑图（气泡图）渐变色效果

---

1.图表数据过多导致浏览器卡顿

• 场景再现：

1. 使用 Vue + Echarts 实现数据可视化
2. 点击数据量大的组件时，Echarts 渲染比较快
3. 但切换其他组件统计图时，会非常卡

• 原因分析：
• 切换其他组件时，Echarts 在当前页面被销毁，但 内存 中未必销毁，导致 Echarts 占用 CPU 高
• 解决方案：

1. 在 mounted() 和 destroy() 之间，加一个 beforeDestroy() ，用于释放该页面的 chart 资源
2. beforeDestroy () { this.chart.clear() }

• 注意区分 dispose() 和 clear()：

1. dispose()：可以销毁 charts，但会导致 charts 的 resize() 启动；因为 charts 已经销毁了，没有 resize()，故会报错：缺少 resize() 
2. clear()：清空 charts 数据，释放内存，不会影响 charts 及它的方法 resize()

2.Y轴数据添加单位

• 效果展示：
• 解决方案：在 yAxis 中，利用 formatter 配置 y轴单位

yAxis:
      {
        show: true,
        type: 'value',
        // 添加单位$
        axisLabel: {
          formatter: '{value}%'
        }
      }

3.带圆角及柱状背景的柱状图

• 效果展示：

        series: [
            {
                name: '系统数据',
                type: 'bar',
                barWidth: 20,
                showBackground: true,
                // 柱状图背景
                backgroundStyle: {
                    color: '#53AAFF'
                },
                itemStyle:{
                    normal: {
                        //柱形图圆角，初始化效果
                        barBorderRadius:[10, 10, 0, 0],
                        // 柱状图高级渐变效果
                        color: new echarts.graphic.LinearGradient(
                            // 0,0,1,0表示从左向右，0,0,0,1表示从右向左
                            1, 0, 0, 0,   
                            [
                                {offset: 1, color: '#7C9FF5'},  
                                {offset: 0.5, color: '#E0F7FF'},
                                {offset: 0, color: '#7C9FF5'}
                            ]
                        )
                    }
                },
    			// 实现数字展示在柱状图上方
				label: {
					show: true,
					position: 'top',
					color:'#fff'
				},
                data:[111,222,333,111,222,333,111]
            }
        ]

4.legned 图例超出部分显示省略号

• 效果展示：

legend: {
　　right: '10',
　　bottom: '5',
    // 处理图例数据
　　formatter: function(name) {
　　　　return name.length > 10 ? name.substr(0,10) + "..." : name;
　　}
}

5.柱状图 / 拓扑图（气泡图）渐变色效果

• 柱状图渐变效果展示：
• 气泡图渐变效果展示：
• 方法一：series - areaStyle - color

1. 线性渐变（柱状图），前四个参数分别是 x0 y0 x2 y2，范围从 0 - 1，表示在 图表盒子 的位置百分比，如果 globalCoord 为 `true`，则该四个值是绝对的像素位置
2. 径向渐变（拓扑图），前三个参数分别是圆心 x、y，半径 r，取值同线性渐变
3. 纹理填充

// 线性渐变（柱状图），x0 y0 x2 y2，范围从 0 - 1，表示在 图表盒子 的位置百分比
// 如果 globalCoord 为 `true`，则该四个值是绝对的像素位置
color: {
    type: 'linear',
    x: 0,
    y: 0,
    x2: 0,
    y2: 1,
    colorStops: [{
        offset: 0, color: 'red' // 0% 处的颜色
    }, {
        offset: 1, color: 'blue' // 100% 处的颜色
    }],
    globalCoord: false // 缺省为 false
}

// 径向渐变（拓扑图），前三个参数分别是圆心 x、y，半径 r，取值同线性渐变
color: {
    type: 'radial',
    x: 0.5,
    y: 0.5,
    r: 0.5,
    colorStops: [{
        offset: 0, color: 'red' // 0% 处的颜色
    }, {
        offset: 1, color: 'blue' // 100% 处的颜色
    }],
    globalCoord: false // 缺省为 false
}

// 纹理填充
color: {
    image: imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement，不支持路径字符串
    repeat: 'repeat' // 是否平铺, 可以是 'repeat-x', 'repeat-y', 'no-repeat'
}

• 方法二：使用 echarts 内置的渐变色生成器 echarts.graphic.LinearGradient

{
    type: 'bar',
    itemStyle: {
        normal: {
            color: new echarts.graphic.LinearGradient(
                // 依次对应 右/下/左/上 四个方位
                // 0 0 0 1 代表渐变色从 正上方 开始
                0, 0, 0, 1,       
                [
                    {offset: 0, color: '#000'},
                    {offset: 0.5, color: '#888'},
                    {offset: 1, color: '#ddd'}
                ]
            )
        }
    }
}