设置echarts的grid、tooltip、柱状图渐变色、折线图渐变色

简介: 设置echarts的grid、tooltip、柱状图渐变色、折线图渐变色
grid: {
    show: false,
        left: '0px',
        top: '50px',
        right: '1px',
        bottom: '0px',
        containLabel: true,
        backgroundColor: 'white',//show: true的时候才显示
        borderColor: '#ccc',
        borderWidth: 1,
    //更多属性访问http://echarts.baidu.com/option.html#grid
}
tooltip: {
    trigger: "axis",
    axisPointer: {
        type: "line",
        lineStyle: {
            color: "blue"//设置提示框线条颜色
        }
    },
    backgroundColor: "rgba(0,0,0,0.6)",
    borderWidth: 1,
    borderColor: "rgba(0,2,85,0.8)",
    padding: 10,
    textStyle: {
        color: "blue"
        //更多属性访问http://echarts.baidu.com/option.html#tooltip
    }
}
/*柱状图渐变色*/
series: [
    {
        itemStyle: {
            normal: {
                barBorderRadius: 10,
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                    offset: 0,
                    color: 'rgba(153,217,234,0)'
                }, {
                    offset: 1,
                    color: '#3fa7dc'
                }]),
                shadowColor: 'rgba(0, 0, 0, 0.4)',
                shadowBlur: 20,
            }
        }
    },
    //更多属性访问http://echarts.baidu.com/option.html#series
]
/*折线图渐变色*/
series: [
    {
        areaStyle: {
            normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                    offset: 0,
                    color: 'rgba(255, 158, 68,1)'
                }, {
                    offset: 1,
                    color: 'rgba(255, 70, 131,0)'
                }])
            }
        }
    },
    //更多属性访问http://echarts.baidu.com/option.html#series
]


相关文章
|
2月前
|
JavaScript API
Echarts中单独为每个legend图例设置样式-根据数据正负显示不同样式
通过上述方法,我们便能够在ECharts中根据数据的正负为每个图例项设置不同的样式,增强了图表的可读性和表现力。这种方法虽然略显间接,但不失为一种灵活的解决方案。
190 2
|
2月前
|
算法 Java Linux
java制作海报五:java 后端整合 echarts 画出 折线图,项目放在linux上,echarts图上不显示中文,显示方框口口口
这篇文章介绍了如何在Java后端整合ECharts库来绘制折线图,并讨论了在Linux环境下ECharts图表中文显示问题。
47 1
|
2月前
|
JSON JavaScript 前端开发
vue中使用echarts实现省市地图绘制,根据数据在地图上显示柱状图信息,增加涟漪特效动画效果
vue中使用echarts实现省市地图绘制,根据数据在地图上显示柱状图信息,增加涟漪特效动画效果
594 0
echarts如何设置滚动条(dataZoom),实现横向或纵向滚动
echarts如何设置滚动条(dataZoom),实现横向或纵向滚动
echarts如何设置滚动条(dataZoom),实现横向或纵向滚动
|
4月前
Echarts——饼图折线图柱状图相互转换
Echarts——饼图折线图柱状图相互转换
146 0
|
6月前
|
搜索推荐 数据可视化 BI
ECharts 蓝色系-荧光图标折线图01案例
ECharts 案例展示了一周内各路线数据的蓝色荧光折线图,揭示流量趋势。预览包括静态图片和动态GIF。使用ECharts 5.2.0配置图表,包含背景、网格、图例及数据。代码示例初始化图表、定义X轴类别和Y轴值,以及系列颜色。完整案例可在链接中下载。案例结合动态效果与个性化设计,增强数据可视化的吸引力。
65 0
ECharts 蓝色系-荧光图标折线图01案例
|
5月前
【详细流程】vue+Element UI项目中使用echarts绘制圆环图 折线图 饼图 柱状图
【详细流程】vue+Element UI项目中使用echarts绘制圆环图 折线图 饼图 柱状图
465 0
|
6月前
|
JavaScript Apache 容器
如何使用ECharts制作一个简单的柱状图
如何使用ECharts制作一个简单的柱状图
83 0
|
7月前
|
数据可视化 前端开发 定位技术
echarts 关于折线统计图常用的属性设置--超详细(附加源码)
echarts 关于折线统计图常用的属性设置--超详细(附加源码)
154 0
|
7月前
Echarts图表设置x轴y轴均随滚轮滚动缩+放 区域缩放
Echarts图表设置x轴y轴均随滚轮滚动缩+放 区域缩放
604 0

热门文章

最新文章