Echarts在线免费图表

 
            let type = ['肥料', '农药'];

option = {
    backgroundColor: '#081736',
    title: {
        show: true,
        text: '',
        textStyle: {
            align: 'rigth',
            color: '#115CB9',
            fontSize: 20,
        },
        top: '3%',
        left: '5%',
    },
    grid: {
        top: "28%",
        right: "10%",
        bottom: "18%",//也可设置left和right设置距离来控制图表的大小
    },
    tooltip: {
        trigger: "axis",
        backgroundColor: 'rgba(17,95,182,0.5)',
        textStyle: {
            color: "#fff"
        },
        // axisPointer: {
        //     type: "line",
        //     label: {
        //         show: false,
        //     }
        // },
        formatter: (pa) => {
            let oneDotHtml = '<span style="display:inline-block;margin-right:5px;width:10px;height:10px;background-color:#1480C2"></span>'
            let twoDotHtml = '<span style="display:inline-block;margin-right:5px;width:10px;height:10px;background-color:#8957A1"></span>'
            // return pa[0].name + pa[0].value
            return (
                pa[0].name + '<br/>'
                + oneDotHtml + pa[1].seriesName + '：' + pa[1].value + "<br>"
                + twoDotHtml + pa[0].seriesName + '：' + pa[0].value
            );
        }
    },
    dataZoom: [{
        show: false,
        xAxisIndex: 0,
        type: 'slider',
        startValue: 0,
        endValue: this.end
    }],
    legend: {
        top: "20%",
        left: '40%',
        // icon: 'rect',
        textStyle: {
            padding: [0, 0, 0, 10],
            color: "#ffffff",
            fontSize: 14,
            lineHeight: 16
        },
        itemGap: 50,
        itemHeight: 10,
        data: type,
    },
    xAxis: {
        data: [
            "草堂镇",
            "白帝镇",
            "朱衣镇",
            "康乐镇",
            "永乐镇",
            "安坪镇"
        ],
        axisLine: {
            show: true, //隐藏X轴轴线
            lineStyle: {
                color: '#85B1B4'
            }
        },
        axisTick: {
            show: false //隐藏X轴刻度
        },
        axisLabel: {
            show: true,
            textStyle: {
                padding: [5, 0, 0, 0],
                color: "#fff" //X轴文字颜色
            }
        },
    },
    yAxis: [{
        type: "value",
        name: "吨",
        nameTextStyle: {
            color: "#fff",
            fontSize: 14
        },
        splitLine: {
            show: false,
            lineStyle: {
                color: 'rgba(33,35,98,1)'
            }
        },
        axisTick: {
            show: false
        },
        axisLine: {
            show: true,
            lineStyle: {
                color: '#85B1B4'
            }
        },
        axisLabel: {
            show: true,
            textStyle: {
                fontSize: 14,
                color: "#fff"
            }
        },
    },
    {
        type: "value",
        // name: "同比",
        // nameTextStyle: {
        //     show: false,
        //     color: "#ebf8ac"
        // },
        position: "right",
        splitLine: {
            show: false
        },
        axisTick: {
            show: false
        },
        axisLine: {
            show: false
        },
        axisLabel: {
            show: false,
            textStyle: {
                color: "#85B1B4"
            }
        }
    },
        // {
        //     type: "value",
        //     // gridIndex: 1,
        //     min: 50,
        //     max: 100,
        //     splitNumber: 8,
        //     splitLine: {
        //         show: false
        //     },
        //     axisLine: {
        //         show: false
        //     },
        //     axisTick: {
        //         show: false
        //     },
        //     axisLabel: {
        //         show: false
        //     },
        //     splitArea: {
        //         show: true,
        //         areaStyle: {
        //             color: ["rgba(250,250,250,0.0)", "rgba(250,250,250,0.05)"]
        //         }
        //     }
        // }
    ],
    series: [{
        name: "农药",
        type: "line",
        yAxisIndex: 1, //使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用
        smooth: false, //平滑曲线显示
        showAllSymbol: true, //显示所有图形。
        symbol: "emptyCircle", //标记的图形为实心圆
        symbolSize: 10, //标记的大小
        itemStyle: {
            //折线拐点标志的样式
            color: "#8957A1"
        },
        lineStyle: {
            color: "#8957A1"
        },
        // areaStyle:{
        //     color: 'transparent'
        //     // color: "rgba(5,140,255, 0.2)"
        // },
        data: [1, 1.2, 3, 1, 1.5, 1]
    },
    {
        name: "肥料",
        type: "bar",
        barWidth: '30%',
        showBackground: false,
        itemStyle: {
            normal: {
                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                    offset: 0,
                    color: "red"
                }, {
                    offset: 0,
                    color: "#1F0D5E"
                }, {
                    offset: 1,
                    color: "#1480C2"
                }
                ])
            }
        },
        label: {
            normal: {
                show: false,
                textStyle: {
                    color: '#FFF'
                },

            }
        },
        data: [14, 16, 20, 7, 15, 11]
    }
    ]
};