ECharts 使用series.itemStyle.color設置柱狀圖顏色透明漸變

標簽： ECharts

1 使用詳解

series.itemStyle.color

說明：柱條的顏色。默認從全局調色盤 option.color 獲取顏色。

默認值：option.color的值。

參數類型：Color。

可選值：請參考以下博客。

ECharts color屬性設置（RGB，透明度，線性漸變，徑向漸變，紋理填充）

2 原始效果圖

3 實現代碼（設置柱狀圖顏色透明漸變）

<body>
    <!-- 為ECharts準備一個具備大小（寬高）的Dom -->
    <div id="main" style="width: 600px;height:400px;"></div>
    <script type="text/javascript">
        // 基于準備好的dom，初始化echarts實例
        var myChart = echarts.init(document.getElementById('main'));
 
        // 指定圖表的配置項和數據
        var option = {
            tooltip: {},
            legend: {
                data:['銷量']
            },
            xAxis: {
                data: ["襯衫","羊毛衫","雪紡衫","褲子","高跟鞋","襪子"]
            },
            yAxis: {},
            series: [{
                name: '銷量',
                type: 'bar',
                data: [5, 20, 36, 10, 10, 20],
				itemStyle:{
					color:new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                    offset: 0,
                    color: '#248ff7'
                }, {
                    offset: 1,
                    color: 'rgba(22,75,247,0.1)'
                }]),
				}
            }]
        };
 
        // 使用剛指定的配置項和數據顯示圖表。
        myChart.setOption(option);
    </script>
</body>

4 最終效果圖（設置柱狀圖顏色透明漸變）

本文鏈接：https://blog.csdn.net/qq_38974638/article/details/108936403

智能推薦

互斥鎖互斥鎖也是屬于線程之間處理同步互斥方式，有上鎖/解鎖兩種狀態。互斥鎖函數接口 1）初始化互斥鎖 pthread_mutex_init() man 3 pthread_mutex_init (找不到的情況下首先 sudo apt-get install glibc-doc sudo apt-get install manpages-posix-dev) 動態初始化 int pthread_...

統計學習方法 - 樸素貝葉斯

引入問題：一機器在良好狀態生產合格產品幾率是 90%，在故障狀態生產合格產品幾率是 30%，機器良好的概率是 75%。若一日第一件產品是合格品，那么此日機器良好的概率是多少。貝葉斯模型生成模型與判別模型判別模型，即要判斷這個東西到底是哪一類，也就是要求y，那就用給定的x去預測。生成模型，是要生成一個模型，那就是誰根據什么生成了模型，誰就是類別y，根據的內容就是x 以上述例子，判斷一個生產出...

styled-components —— React 中的 CSS 最佳實踐

https://zhuanlan.zhihu.com/p/29344146 Styled-components 是目前 React 樣式方案中最受關注的一種，它既具備了 css-in-js 的模塊化與參數化優點，又完全使用CSS的書寫習慣，不會引起額外的學習成本。本文是 styled-components 作者之一 Max Stoiber 所寫，首先總結了前端組件化樣式中的最佳實踐原則，然后在此基...

基于TCP/IP的網絡聊天室用Java來實現

基于TCP/IP的網絡聊天室實現開發工具:eclipse 開發環境:jdk1.8 發送端接收端工具類運行截圖...