1***@qq.com
1***@qq.com
  • 发布:2020-07-16 18:00
  • 更新:2020-07-17 09:09
  • 阅读:1024

为什么自定义颜色不生效啊

分类:uni-app
2020-07-16 18:00 负责人:无 分享
已邀请:
y***@hotmail.com

y***@hotmail.com

function函数在序列化时会被忽略,请采用手动setOption的方式
例子:

复制代码<template>  
  <view>  
    <uni-ec-canvas class="uni-ec-canvas" id="line-chart" ref="canvas" canvas-id="lazy-load-chart" :ec="ec"></uni-ec-canvas>  
  </view>  
</template>  

  import uniEcCanvas from '@/components/uni-ec-canvas/uni-ec-canvas'  
  import * as echarts from '@/components/uni-ec-canvas/echarts'  
  let chart = null  
  export default {  
    data() {  
      return {  
        ec: {  
          lazyLoad: true  
        },  
        option: {  
          title: {  
            text: ''  
          },  
          tooltip: {  
            trigger: 'axis',  
            formatter: '{b}\r\n{c0}人',  
            axisPointer: {  
              type: 'line',  
              axis: 'x',  
              label: {  
                backgroundColor: '#000000'  
              }  
            }  
          },  
          grid: {  
            left: '6%',  
            right: '6%',  
            top: '6%',  
            bottom: '6%',  
            containLabel: true  
          },  
          xAxis: {  
            type: 'category',  
            boundaryGap: false,  
            data: ['2-12', '2-14', '2-16', '2-18', '2-20', '2-22', '2-24'],  
            axisLine: {  
              // y轴  
              show: false  
            },  
            axisTick: {  
              // y轴刻度线  
              show: false  
            },  
            splitLine: {  
              // 网格线  
              show: false  
            }  
          },  
          yAxis: {  
            type: 'value',  
            axisLine: {  
              // y轴  
              show: false  
            },  
            axisTick: {  
              // y轴刻度线  
              show: false  
            },  
            splitLine: {  
              // 网格线  
              show: false  
            }  
          },  
          series: [{  
            name: '浏览量',  
            type: 'line',  
            smooth: true,  
            lineStyle: {  
              color: '#EF5959'  
            },  
            data: [120, 132, 101, 134, 90, 230, 210]  
          }]  
        }  
      };  
    },  
    methods: {  
      initChart(canvas, width, height, canvasDpr) {  
        console.log(canvas, width, height, canvasDpr)  
        chart = echarts.init(canvas, null, {  
          width: width,  
          height: height,  
          devicePixelRatio: canvasDpr  
        })  
        canvas.setChart(chart)  
        chart.setOption(this.option)  
        return chart  
      },  
    },  
    () {  
      chart = null  
    },  
    onLoad() {  
      this.$refs.canvas.init(this.initChart)  
    }  
  }  

<style scoped>  
  .uni-ec-canvas {  
    width: 100%;  
    height: 100vh;   
    display: block;  
  }  
</style>

该问题目前已经被锁定, 无法添加新回复

  • 标题 / 粗斜体
  • 代码片段
  • 超链接 / 图片 / 视频
  • 列表 / 引用

文章内容较多时,可以用标题分段 :

## 大标题 
### 小标题

斜体 / 粗体 :

**粗体** 
*斜体*
***粗斜体***

代码片段 :

``` javascript
代码片段
```

超链接 :

[链接文字](链接地址) 例: [百度](http://www.baidu.com)

图片 :

![图片说明](图片地址) 例: ![百度logo](http://www.baidu.com/img/bdlogo.gif)

视频 :

!![视频说明](视频地址) 例: !![优酷视频](http://youku.com)

有序列表 :

1. 123
2. 123
3. 123

无序列表 :

- 123
- 123
- 123

引用 : ( 双回车后结束引用 )

> 引用内容
引用内容
引用内容