Echarts在线免费图表

 
            var xData = ["1","2","3","4","5","6","7","8","9","10","11","12"] ;
var yData = ["42.3","43.1","42.8","42.6","42.9","43.5","44.7","44.5","44.1","43.9","43.6","43.1"];
let isShowYData = true

option = {
   backgroundColor:"black",
   //你的代码
   tooltip: {
      trigger: 'item',
      formatter: function (params) {
         return (
            '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:#ffcf20;"></span>' +
            '&nbsp' +
            params.name +
            '月' +
            '&nbsp' +
            '&nbsp' +
            params.value +
            '元/斤'
         )
      }
   },
   animation: true,
   xAxis: [
      {
         name: '月',
         type: 'category',
         data: xData,
         axisTick: {
            alignWithLabel: true
         },
         nameTextStyle: {
            color: '#82b0ec'
         },
         axisLine: {
            show: true,
            lineStyle: {
               color: '#82b0ec'
            }
         },
         axisLabel: {
            interval: 0,
            formatter: function (value) {
               let ret = '' // 拼接加\n返回的类目项
               var maxLength = 4 // 每项显示文字个数
               var valLength = value.length // X轴类目项的文字个数
               var rowN = Math.ceil(valLength / maxLength) // 类目项需要换行的行数
               if (rowN > 1) {
                  // 如果类目项的文字大于5,
                  for (let i = 0; i < rowN; i++) {
                     let temp = '' // 每次截取的字符串
                     var start = i * maxLength // 开始截取的位置
                     var end = start + maxLength // 结束截取的位置
                     // 这里也可以加一个是否是最后一行的判断，但是不加也没有影响，那就不加吧
                     temp = `${value.substring(start, end)}${i !== rowN - 1 ? '\n' : ''}`
                     ret = ret + temp // 凭借最终的字符串
                  }
                  return ret
               } else {
                  return value
               }
            },
            textStyle: {
               color: 'rgba(255, 255, 255, 0.9)',
               width: 24,
               height: 18,
               fontSize: 12,
               fontWeight: 400,
               lineHeight: 18
            },
            margin: 20
         }
      }
   ],
  
   yAxis: [
      {
         name: '价格(元/斤)',
         nameTextStyle: {
            color: 'rgba(255, 255, 255, 0.6)',
            padding: [0, 35, 5, 0]
         },
         //   nameLocation: 'middle',
         show: true,
         type: 'value',
         axisLabel: {
            textStyle: {
               color: 'rgba(255, 255, 255, 0.9)'
            }
         },
         splitLine: {
            lineStyle: {
               color: 'rgba(255,255,255,0.15)',
               type: 'dashed'
            }
         },
         axisLine: {
            show: true
         }
      }
   ],
   series: [
      {
         name: '',
         type: 'pictorialBar',
         symbolSize: [20, 10],
         symbolOffset: [0, -6], // 上部椭圆
         symbolPosition: 'end',
         z: 12,
         // "barWidth": "0",
         //   barWidth: "30",
         label: {
            normal: {
               width: 39,
               height: 20,
               show: true,
               position: 'top',
               // "formatter": "{c}%"
               fontSize: 13,
               fontWeight: 400,
               color: 'rgba(255, 255, 255, 0.9)',
               lineHeight: 15
            }
         },
         color: '#ffcf20',
         data: yData
      },
      {
         name: '',
         type: 'pictorialBar',
         symbolSize: [25, 10],
         symbolOffset: [0, 7], // 下部椭圆
         // "barWidth": "20",
         z: 12,
         color: '#ffcf20',
         data: yData
      },
      {
         name: '',
         type: 'pictorialBar',
         symbolSize: function (d) {
            return d > 0 ? [32, 15] : [0, 0]
         },
         symbolOffset: [0, 12], // 下部内环
         z: 10,
         itemStyle: {
            normal: {
               color: 'transparent',
               borderColor: '#FFCF20',
               borderType: 'solid',
               borderWidth: 2
            }
         },
         data: yData
      },
      {
         name: '',
         type: 'pictorialBar',
         symbolSize: [40, 20],
         symbolOffset: [0, 18], // 下部外环
         barMinHeight: 1,
         z: 10,
         itemStyle: {
            normal: {
               color: 'transparent',
               borderColor: '#FFCF20',
               borderType: 'solid',
               borderWidth: 2,
               opacity: 0.2
            }
         },
         data: isShowYData ? yData : []
      },
      {
         type: 'bar',
         // silent: true,
         barWidth: '20',
         barGap: '10%', // Make series be overlap
         barCateGoryGap: '10%',
         itemStyle: {
            normal: {
               color: new echarts.graphic.LinearGradient(0, 0, 0, 0.7, [
                  {
                     offset: 0,
                     color: 'rgba(255,207,32,0.6)'
                  },
                  {
                     offset: 1,
                     color: 'rgba(255,207,32,0.1)'
                  }
               ])
               // opacity: 0.5,
            }
         },
         data: yData
      }
   ]
};