Echarts在线免费图表

 
                   let data = [
        {nowValue: 335,targetValue:111, name: '直接访问1'},
        {nowValue: 310,targetValue:121, name: '邮件营销2'},
        {nowValue: 234,targetValue:131, name: '联盟广告3'},
        {nowValue: 135,targetValue:141, name: '视频广告4'},
        {nowValue: 1548,targetValue:161, name: '搜索引擎5'}
      ];
 option = {
        tooltip: {
          trigger: 'axis',
          formatter:function(param){
            // console.log(param)
            let dom = `<div>`
                    dom+=`<h4>${param[0].name}</h4>`
                    param.forEach(item=>{
                      dom+= `<div class="f-align-center" >
                                <div style="width: 200px" >
                                   <span  class="${item.data.valueType==='number'?'block-chart':'radius-chart'}" style="background-color: ${item.color}" ></span>
                                   <span>${item.seriesName}</span>
                                </div>
                                <div>${item.value}</div>
                            </div>`
                    })
                dom += `</div>`
            return dom;
          },
          axisPointer: {
            type: 'shadow'// 鼠标hover时的背景
          },

        },

        dataZoom: [
          {
            start: 0,
            end: 100
          }
        ],

        grid: {
          bottom: 120
        },

        xAxis: [
          {
            type: 'category',
            show: true,
            axisTick: {
              alignWithLabel: true,
              backgroundColor:'#333'
            },
            data: ['A','B及B以上','C及C以上','D']
          }
        ],
        yAxis: [
          {
            type: 'value',
            // max: 100,
            min: 0,
            position: 'left',
            alignTicks: true,
            axisLine: {
              show: true,
              lineStyle: {
                color: '#333'
              }
            },
            axisLabel: {
              formatter: '{value}'
            }
          },
          // 百分比Y轴配置
          {
            type: 'value',
            // max: 100,
            // min: 0,
            position: 'right',
            alignTicks: true,
            axisLine: {
              show: true,
              lineStyle: {
                color: '#333'
              }
            },
            axisLabel: {
              formatter: '{value} %'
            }
          }
        ],

        legend: {
          // selectedMode:false,// 取消lenged点击事件
          bottom:60,
          backgroundColor:'#fff',
          left: 'center',
          // data: ['当前值（数量）','目标值（数量）','当前值（占比）','目标值（占比）'] // 名称需要和series的name对应才会出现 lenged
        },
        series: [
          {
            name: '当前值（数量）',
            type: 'bar',//数据展示方式：line或bar
            barWidth: 20,
            yAxisIndex: 0,
            itemStyle: {
              color:'#0096fc'  //柱形图颜色
            },
            data: data.map(m => {// 适用范围
              return {
                value: m.nowValue,
                valueType:'number',
                name: m.name,
                dataInfo: m
              }
            }),
            lineStyle:{
              width:1,
            },
            emphasis: {
              lineStyle: {
                width: 2,	// hover时的折线宽度
              }
            }
          },
          {
            name: '目标值（数量）',
            type: 'bar',//数据展示方式：line或bar
            barWidth: 20,
            yAxisIndex: 0,
            itemStyle: {
              color:'#ff8d1a'  //柱形图颜色
            },
            data: data.map(m => {// 适用范围
              return {
                value: m.targetValue,
                valueType:'number',
                name: m.name,
                dataInfo: m
              }
            })
          },
          {
            name: '当前值（占比）',
            type: 'line',//数据展示方式：line或bar
            barWidth: 20,
            yAxisIndex: 1,
            itemStyle: {
              color:'#0f67ff'  //柱形图颜色
            },
            data: data.map(m => {// 适用范围
              return {
                value: m.nowValue,
                valueType:'percent',
                name: m.name,
                dataInfo: m
              }
            })
          },
          {
            name: '目标值（占比）',
            type: 'line',//数据展示方式：line或bar
            barWidth: 20,
            yAxisIndex: 1,
            itemStyle: {
              color:'#ff5252' //柱形图颜色
            },
            data: data.map(m => {// 适用范围
              return {
                value: m.targetValue,
                valueType:'percent', // 用来判断数量、占比
                name: m.name,
                dataInfo: m
              }
            })
          },
         {
            name: '等级认定标准',
            symbol: 'circle',
            symbolSize: 10,
            type: 'line',//数据展示方式：line或bar
            lineStyle:{
              type: 'dashed'
            },
            itemStyle: {
              color:'#fcbb30', //柱形图颜色
            },
            yAxisIndex: 0,
            data: data.map(m=>{
              return 100
            })
          }
        ],
      }