search

ecomfe / echarts-liquidfill

Liquid Fill Chart for Apache ECharts
https://ecomfe.github.io/echarts-liquidfill/example/
BSD 3-Clause "New" or "Revised" License
1.47k stars 620 forks source link

只能显示一种颜色 #42

Closed hanfengcan closed 6 years ago

hanfengcan commented 6 years ago 
var option = {
        series: [{
          type: 'liquidFill',
          data: [0.5, 0.4, 0.3],
          color: ['gray', 'green', 'blue'],
          shape: 'container',
          outline: {
            show: false
          },
          label: {
            normal: {
              formatter: ''
            }
          },
          backgroundStyle: {
            color: '#FFF0'
          }
        }]
};

在echarts4.0中使用这个插件,发现只会显示一种颜色. 只显示color中的第一个颜色 透明度的修改也没有明显变化

image

Ovilia commented 6 years ago

谢谢反馈，我会跟进一下

hanfengcan commented 6 years ago

附加一些调试信息

image

hanfengcan commented 6 years ago

直接在一个HTML文件里面有正常了.一样的option

<body>
  <div id="app" style="width: 600px;height:400px;">
  </div>
  <script type="text/javascript">
    echarts.init(document.getElementById('app')).setOption({
      series: [{
          type: 'liquidFill',
          data: [0.5, 0.4, 0.3],
          period: 8000,
          color: ['gray', 'green', 'blue'],
          itemStyle: {
            normal: {
              opacity: 0
            },
            emphasis: {
              opacity: 1
            }
          },
          shape: 'container',
          outline: {
            show: false
          },
          label: {
            normal: {
              formatter: ''
            }
          },
          backgroundStyle: {
            color: '#FFF0'
          }
        }]
    })
  </script>
</body>
hanfengcan commented 6 years ago

image

差别在这里

工程环境是Vue,不知道是不是和Vue有关还是怎样

hanfengcan commented 6 years ago

暂时解决了

把import 'echarts-liquidfill'换成import '../../node_modules/echarts-liquidfill/dist/echarts-liquidfill'就好了

Ovilia commented 6 years ago

试一下 ECharts 4.0.2 版本和本项目的 2.0.0 版本，这个问题应该修复了。