自己项目中曾用到过的一些 echarts图标案例

之前做的一个项目中用到的一些图表，echarts虽然有文档但是有些特殊的还是需要耗费时间来找，我整理了一些，希望能帮助到大家；

因为这部分共用比较多，我先声明了一个公共的对象以便下边实例使用：

let chartTheme = {
			xAxis:{
				axisLine: {
				    lineStyle: {
				        color: '#0f5143', // y坐标轴的轴线颜色
				        width: 1, //这里是坐标轴的宽度,可以去掉
				    }
				   
				},
				axisLabel:{
				    textStyle:{
				        color: '#fff'
				    }
				},
				axisTick:{
					show:false
				}
			},
			yAxis:{
				position: 'left',
				nameTextStyle:{
				    color:"#fff",
					// padding : [0, 0, 0, -20],
					align: "right",
				},
				axisLabel: {
				    show: true,
				    interval: 'auto',
				    formatter: '{value}',
				    textStyle:{
				        color: '#fff'
				    }
				},
				axisLine: {
				    lineStyle: {
				        color: '#0f5143', // y坐标轴的轴线颜色
				        width: 1, //这里是坐标轴的宽度,可以去掉
				    }
				},
				splitLine: {
				    show: true,
				    lineStyle:{
				        type:'dashed',
				        color: "#0f5143"
				    }
				},
				axisTick:{
					show:false
				}
			},
			grid: {
				// show: true,
				top: 100,
				left: 60,
				bottom: 40,
				right: 60,
				containLabel: true
			}
		}

一、柱状、折线组合图

var yuqibanzhezhu = echarts.init(document.getElementById("yuqibanzhezhu"))
      
        var zhezhuoption = {
           color: ['#00F1FF','#FFBE00','#A35CBE','#76BBF5'],
		   grid: chartTheme.grid,
            tooltip: {
                show: true,
                trigger: 'axis',
                backgroundColor:'rgba(0,241,255,0.1)',borderColor:'#2df2e9',borderWidth:'1',
                textStyle: {
                    color: "#fff" //设置文字颜色
                },
            },
            // toolbox: {
            //     feature: {
            //         // dataView: {show: true, readOnly: false},
            //         //saveAsImage: {show: false}
            //     }
            // },
			legend : {
				data:[
				    {icon: 'image:///cabin-web/img/ggkb/circle1.png', name: dataName1},
				    {icon: 'image:///cabin-web/img/ggkb/circle2.png', name: dataName3},
				    {icon: 'image:///cabin-web/img/ggkb/circle3.png', name: dataName5},
				    {icon: 'image:///cabin-web/img/ggkb/circle4.png', name: dataName7},
				],
				itemGap: 50,
				itemWidth: 12,
				itemHeight: 12,
				top: 40,
				right: 60, 
				textStyle:{
				    color:"#fff"
				}  
			},
            // legend: [{
            //     data: [
            //   	  { name: dataName1, icon: 'circle' }, 
            //   	  { name: dataName3, icon: 'circle' }, 
            //   	  { name: dataName5, icon: 'circle' }, 
            //   	  { name: dataName7, icon: 'circle' }],
            //         x:'center',
            //         y:'0%'
            // },{
            //     data: [
              	 
            //   	  { name: dataName2, icon: 'roundRect' }, 
            //   	  { name: dataName4, icon: 'roundRect', }, 
            //   	  { name: dataName6, icon: 'roundRect' }, 
            //   	  { name: dataName8, icon: 'roundRect', }],
            //   	  x:'center',
            //         y:'7%'
            // }],
            // color: ['#8ECBD9', '#D49097', '#CCB98E', '#97BA8D', '#8ECBD9', '#D49097', '#CCB98E', '#97BA8D'],
            xAxis: [
                {
                    type: 'category',
                    data: dates,
                    // axisPointer: {
                    //     type: 'shadow'
                    // },
					axisLine: chartTheme.xAxis.axisLine,
					axisLabel:chartTheme.xAxis.axisLabel,
					axisTick:chartTheme.xAxis.axisTick,
                }
            ],
            yAxis: [
                {
                    type: 'value',
                    name: '(万元)',
                    position: 'left',
                    // axisLabel: {
                    //     formatter: '{value}'//Y轴刻度设置***************************
                    // }
					nameTextStyle:chartTheme.yAxis.nameTextStyle,
					axisLabel: chartTheme.yAxis.axisLabel,
					axisLine: chartTheme.yAxis.axisLine,
					splitLine:chartTheme.yAxis.splitLine,
					axisTick:chartTheme.yAxis.axisTick,
                },
                {
                    type: 'value',
                    name: '(个)',
                    // position: 'right',
                    // axisLabel: {
                    //     formatter: '{value}'//Y轴刻度设置***************************
                    // }
					nameTextStyle:{
						  color:"#fff",
						align: "left",
					  },
					axisLabel: chartTheme.yAxis.axisLabel,
					axisLine: chartTheme.yAxis.axisLine,
					splitLine:chartTheme.yAxis.splitLine,
					axisTick:chartTheme.yAxis.axisTick,
                }
            ],
            series: [

                {
                    symbol: 'none',  //取消折点圆圈
                    name: dataName1,
                    type: 'line',
                    yAxisIndex: 1,
                    data: data1,
                    smooth:true
                },
                {
                    symbol: 'none',  //取消折点圆圈
                    name: dataName3,
                    type: 'line',
                    yAxisIndex: 1,
                    data: data3,
                    smooth:true
                },
                {
                    symbol: 'none',  //取消折点圆圈
                    name: dataName5,
                    type: 'line',
                    yAxisIndex: 1,
                    data: data5,
                    smooth:true
                },
                {
                    symbol: 'none',  //取消折点圆圈
                    name: dataName7,
                    type: 'line',
                    yAxisIndex: 1,
                    data: data7,
                    smooth:true
                },
                {
                    name: dataName2,
                    type: 'bar',
                    data: data2,
					itemStyle: {
					//柱形图圆角，鼠标移上去效果，如果只是一个数字则说明四个参数全部设置为那么多
					 normal: {
						  //柱形图圆角，初始化效果
						   barBorderRadius:[5, 5, 0, 0],
					      color: new echarts.graphic.LinearGradient(
					            0, 1, 0, 0,
					            [
					                { offset: 0, color: '#419bd3' },                   //柱图渐变色
					                { offset: 1, color: '#00F1FF' },                   //柱图渐变色
					            ]
					        ),
					    }
					},
                },
                {
                    name: dataName4,
                    type: 'bar',
                    data: data4,
					itemStyle: {
					//柱形图圆角，鼠标移上去效果，如果只是一个数字则说明四个参数全部设置为那么多
					 normal: {
						  //柱形图圆角，初始化效果
						   barBorderRadius:[5, 5, 0, 0],
					      color: new echarts.graphic.LinearGradient(
					            0, 1, 0, 0,
					            [
					                { offset: 0, color: '#91663c' },                   //柱图渐变色
					                { offset: 1, color: '#FFBE00' },                   //柱图渐变色
					            ]
					        ),
					    }
					},
                },
                {
                    name:dataName6,
                    type: 'bar',
                    data: data6,
					itemStyle: {
					//柱形图圆角，鼠标移上去效果，如果只是一个数字则说明四个参数全部设置为那么多
					 normal: {
						  //柱形图圆角，初始化效果
						   barBorderRadius:[5, 5, 0, 0],
					      color: new echarts.graphic.LinearGradient(
					            0, 1, 0, 0,
					            [
					                { offset: 0, color: '#a83bc1' },                   //柱图渐变色
					                { offset: 1, color: '#A35CBE' },                   //柱图渐变色
					            ]
					        ),
					    }
					},
                },
                {
                    name: dataName8,
                    type: 'bar',
                    data: data8,
					itemStyle: {
					//柱形图圆角，鼠标移上去效果，如果只是一个数字则说明四个参数全部设置为那么多
					 normal: {
						  //柱形图圆角，初始化效果
						   barBorderRadius:[5, 5, 0, 0],
					      color: new echarts.graphic.LinearGradient(
					            0, 1, 0, 0,
					            [
					                { offset: 0, color: '#406daa' },                   //柱图渐变色
					                { offset: 1, color: '#5c9ff8' },                   //柱图渐变色
					            ]
					        ),
					    }
					},
                }
            ]
        }
        yuqibanzhezhu.setOption(zhezhuoption);