Echarts在线免费图表

 
            /**
 * 将 linear-gradient(360deg, #972FDD 0%, #E092FF 100%)
 * 转换为
 * new echarts.graphic.LinearGradient(0, 0, 0, 1, [
 *   {offset: 0,color: '#972FDD'},
 *   {offset: 1,color: '#E092FF'}
 * ])
 *
 */
function stylesRender(color, echarts) {
   const {
      angle,
      color1,
      offset1,
      color2,
      offset2,
   } = parseLinearRradient(color)

   let x = 0
   let y = 0
   let x2 = 1
   let y2 = 1
   // css 背景线性渐变坐标系 和 ECharts 的线性渐变对象的坐标系不同，所以需要转换角度
   if (angle >= 0 && angle <= 90) {
      x = 0
      x2 = 1
      y = angle / 90
      y2 = y
   }
   else if (angle > 90 && angle <= 180) {
      y = 0
      y2 = 1
      x = 1 - (angle - 90) / 90
      x2 = x
   }
   else if (angle > 180 && angle <= 270) {
      x = 1
      x2 = 0
      y = 1 - (angle - 180) / 90
      y2 = y
   }
   else if (angle > 270 && angle <= 360) {
      y = 1
      y2 = 0
      x = (angle - 270) / 90
      x2 = x
   }

   // 创建 ECharts 风格的线性渐变对象
   return new echarts.graphic.LinearGradient(x, y, x2, y2, [
      { offset: offset1, color: color1 },
      { offset: offset2, color: color2 },
   ], false)
}

function parseLinearRradient(color) {
   const reg
      = /linear-gradient\((\d+)deg, (rgba\([^)]+\)|#[0-9a-zA-Z]+) (\d+%), (rgba\([^)]+\)|#[0-9a-zA-Z]+) (\d+)%\)/

   if (!reg.test(color))
      throw new Error('无法解析的颜色格式')

   const arr = reg.exec(color)

   // 提取角度、颜色和偏移值
   const angle = Number.parseInt(arr[1], 10)
   const color1 = arr[2]
   const offset1 = Number.parseFloat(arr[3]) / 100
   const color2 = arr[4]
   const offset2 = Number.parseFloat(arr[5]) / 100

   return {
      angle,
      color1,
      offset1,
      color2,
      offset2,
   }
}


function colorRender(color, linearRradient) {
   const { color1 } = parseLinearRradient(linearRradient)
   return {
      areaStyle: {
         color: stylesRender(linearRradient, echarts),
         shadowColor: color1,
         shadowBlur: 1,
      },
      itemStyle: {
         color,
         borderColor: '#ffffff',
         borderWidth: 2,
      },
      emphasis: {
         itemStyle: {
            color,
            borderColor: '#fff',
            extraCssText: 'box-shadow: 8px 8px 8px rgba(0, 0, 0, 1);',
            borderWidth: 2,
         },
      },
   }
}





const style = {
   color: '#3D7BFA',
   linearRradient: 'linear-gradient(180deg, rgba(61,123,250,0.45) 0%, rgba(211,255,231,0) 100%)',
}
const list = [
   { name: '2019-01', value: 269 },
   { name: '2019-02', value: 650 },
   { name: '2019-03', value: 422 },
   { name: '2019-04', value: 222 },
   { name: '2019-05', value: 929 },
   { name: '2019-06', value: 916 },
]


const titles = list.map(i => i.name)
const datas = list.map(i => i.value)


option = {

   grid: {
      left: '8',
      right: '23',
      top: '40',
      bottom: '40',
      containLabel: true,
   },
   xAxis: {
      data: titles,
      type: 'category',
      axisTick: {
         alignWithLabel: true,
         color: '#dddddd',
         show: false,
      },
      axisLine: {
         lineStyle: {
            color: '#dddddd',
         },
      },
      axisLabel: {
         fontSize: 14,
         color: '#999999',
      },
   },
   yAxis: {
      type: 'value',
      nameTextStyle: {
         fontSize: 14,
         lineHeight: 20,
         align: 'right',
         color: '#999999',
      },
      axisTick: {
         show: false,
      },
      axisLine: {
         lineStyle: {
            color: '#999999',
         },
      },
      axisLabel: {
         margin: 6,
         fontSize: 14,
         color: '#999999',
      },
      splitLine: {
         lineStyle: {
            type: 'dashed',
            color: 'rgba(101,159,255,0.19)',
         },
      },
   },
   legend: {
      show: false,
   },
   tooltip: {
      show: true,
      trigger: 'axis',
      className: 'tooltip',
      backgroundColor: 'rgba(0,0,0,0.5)',
      borderWidth: 0,
      padding: 14,
      textStyle: {
         color: '#fff',
         fontSize: '16px',
      },
      axisPointer: {
         lineStyle: {
            color: '#3D7BFA',
            type: 'solid',
         },
      },
   },
   series: {
      type: 'line',
      smooth: false,
      symbol: 'circle',
      symbolSize: 10,
      lineStyle: {
         width: 3,
      },

      data: datas,
      ...colorRender(style.color, style.linearRradient),
   },
};