Vue ECharts bar柱状图 动态生成渐变色 - echarts.graphic.LinearGradient + 圆角半径 - barBorderRadius - 附完整示例

// 引入ECharts主模块
var echarts = require('echarts/lib/echarts');
// 引入柱状图
require('echarts/lib/chart/bar');
 
// 初始化ECharts实例
var myChart = echarts.init(document.getElementById('main'));
 
// 指定图表的配置项和数据
var option = {
    // 图表标题
    title: {
        text: 'ECharts 柱状图渐变色和圆角示例'
    },
    // 提示框
    tooltip: {},
    // 图例
    legend: {
        data:['销量']
    },
    // X轴
    xAxis: {
        data: ['衬衫','羊毛衫','雪纺衫','裤子','高跟鞋','袜子']
    },
    // Y轴
    yAxis: {},
    // 系列列表
    series: [{
        name: '销量',
        type: 'bar',
        data: [5, 20, 36, 10, 10, 20],
        // 柱状图样式设置
        itemStyle: {
            // 圆角
            borderRadius: [5, 5, 0, 0],
            // 渐变色设置
            color: new echarts.graphic.LinearGradient(
                0, 0, 0, 1,  // x1, y1, x2, y2 表示渐变方向，这里是从上到下
                [
                    {offset: 0, color: '#83bff6'},   // 柱图上端颜色
                    {offset: 0.5, color: '#188df0'}, // 柱图中间颜色
                    {offset: 1, color: '#188df0'}    // 柱图下端颜色
                ]
            )
        }
    }]
};
 
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);

这段代码首先引入了ECharts的核心模块和柱状图模块，然后初始化了一个ECharts实例。在配置项中，我们设置了图表的标题、提示框、图例和坐标轴，并且针对柱状图的series进行了配置，包括了圆角的设置和渐变色的定义。最后，我们使用setOption方法将这些配置应用到图表实例上。这个示例展示了如何在Vue中使用ECharts创建具有圆角和渐变色的柱状图。