echarts 基本使用

     1 折线 颜色 折线点颜色 区域背景颜色

this.chart.setOption({

          grid: {

            top: '3%', //很重要 是撑满盒子的关键

            left: '1%',

            right: '1%',

            bottom: '10%',

            // show: 'true',

            backgroundColor: '#9999',

            containLabel: true

          },

          xAxis: {

            type: 'category',

            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],

            // axisLine: {

            //   lineStyle: {

            //     color: '#272729', // x轴的颜色

            //     // width: 8, // 轴线的宽度

            //     type: 'solid'

            //   },

            // },

            axisLabel: {

              show: true,

              textStyle: {

                // color: '#ff0000',

                color: "#5B5B5B",

              },

            },

            axisTick: {

              show: false  //显示

            },

            axisLine: {

              show: true 

   //显示横坐标

            },

            z: 10

          },

          yAxis: {

            type: 'value',

            // axisLine: {

            //   lineStyle: {

            //     color: '#272729', // y轴的颜色

            //     // width: 8, // y轴线的宽度

            //   },

            // },

            axisLine: {

              show: false

            },

            axisTick: {

              show: false

            },

            splitLine: { // 网格线

              lineStyle: {

                type: 'dotted' // 设置网格线类型 dotted：虚线 solid:实线

              },

              show: false // 隐藏或显示

            }

          },

          series: [

            {

              name: '一周降雨量变化',

              data: [250, 230, 135, 82, 135, 147, 260],

              type: 'line',

              symbol: 'circle', // 折线点设置为实心点

              symbolSize: 6, // 折线点的大小

              itemStyle: {

                normal: {

                  color: "#4D6BC8", // 折线点的颜色

                  borderColor: '#ffffff', // 拐点边框颜色

                  borderWidth: 2, // 拐点边框大小

                },

              },

              lineStyle: {

                color: "#94ADDF", // 折线的颜色

              },

              areaStyle: {

                // 区域背景色

                color: {

                  type: 'linear',

                  x: 0,

                  y: 0,

                  x2: 0,

                  y2: 1,

                  colorStops: [

                    {

                      offset: 0,

                      color: "#D2D8F7",

                    },

                    {

                      offset: 1,

                      color: '#F3F6FC',

                    },

                  ],

                  global: false,

                },

              },

            },

          ],

        }, true)  

 // 实列2   圆柱 背景渐变色 

   

        this.chart.setOption({

          grid: {

            top: '7%',

            left: '1%',

            right: '1%',

            bottom: '1%',

            // show: 'true',

            backgroundColor: '#9999',

            containLabel: true

          },

          xAxis: {

            // type: 'category',

            data: chartData.xdata,

            // axisLabel: {

            //   inside: true,

            //   color: '#fff'

            // },

            axisTick: {

              show: false

            },

            axisLine: {

              show: false

            },

            z: 10

          },

          yAxis: {

            // show: false,

            type: 'value',

            axisLine: {

              show: false

            },

            axisTick: {

              show: false

            },

            splitLine: { // 网格线

              lineStyle: {

                type: 'dotted' // 设置网格线类型 dotted：虚线 solid:实线

              },

              show: false // 隐藏或显示

            }

          },

          series: [

            {

              type: 'bar',

              showBackground: false,

              data: chartData.ydata,

              itemStyle: {

                // 这里设置柱形图圆角 [左上角，右上角，右下角，左下角]

                normal: {

                  barBorderRadius: [20, 20, 0, 0],

                  color: {

                    type: 'linear',

                    x: 0,

                    y: 0,

                    x2: 0,

                    y2: 1,

                    colorStops: [{

                      offset: 0, color: 'pink' // 0% 处的颜色

                    },

                    {

                      offset: 0.5, color: '#78A5CF' // 100% 处的颜色

                    },

                    {

                      offset: 1, color: '#4f78A7' // 100% 处的颜色

                    }],

                    global: false // 缺省为 false

                  }

                },

              },

              // emphasis: {  //点击后的颜色

              //   itemStyle: {

              //     color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [

              //       { offset: 0, color: '#9FDOF3' },

              //       { offset: 0.7, color: '#78A5CF' },

              //       { offset: 1, color: '#4f78A7' }

              //     ])

              //   }

              // },

            }

          ],

        }, true)