技術標籤：echarts

var myChart = echarts.init(document.getElementById(id));
    var option = {
        tooltip: {
            trigger: 'axis',
            formatter: function (params) {
                return dataName[params[0].dataIndex] + "<br> 產品數量：" + params[0].value + "<br> 產品價格："
 
 + params[1].value;
            },
            axisPointer: {
                type: 'cross',
                lineStyle: {
                    color: '#57617B'
                }
            }
        },
        "legend": {
            icon: 'circle',
            "data": [
                {
 
"name": "產品數量"},
                {"name": "產品價格"},
                {"name": "產品圖片"}
            ],
            "textStyle": {
                "color": "rgba(255,255,255,0.9)"
            }
        },
        dataZoom:
 
 [{
            show: true,
            //type: 'inside',
            start: 0,
            end: 20,
            top: '92%',
            bottom: "3%",
            handleSize: '100%',
            backgroundColor: 'rgba(255,255,255,.2)',
            textStyle: {
                color: "rgba(255,255,255,.5)"
            },
            borderColor: 'rgba(255,255,255,.1)',
            fillerColor: 'rgba(255,255,255,.1)'
        }],
        "grid": {
            "top": "25%",
            "right": "2%",
            "bottom": "10%",
            "left": "2%",
            containLabel: true
        },
        "xAxis": [
            {
                "type": "category",
                data: timeDate,
                interval: 0,
                axisLine: {lineStyle: {color: "rgba(255,255,255,.1)"}},
                axisLabel: {
                    rotate: -270,
                    textStyle: {color: "rgba(255,255,255,.6)", fontSize: '12'},
                }
            }
        ],
        "yAxis": [
            {
                "type": "value",
                "name": "數量",
                "axisLabel": {
                    "show": true,
                },
                axisLine: {lineStyle: {color: 'rgba(255,255,255,.4)'}},
                splitLine: {show: false, lineStyle: {color: 'rgba(255,255,255,.2)'}}
            },
            {
                "type": "value",
                "name": "價格",
                "show": true,
                "axisLabel": {
                    "show": true,
                },
                axisLine: {lineStyle: {color: 'rgba(255,255,255,.4)'}},
                splitLine: {show: false}
            },
        ],
        "series": [
            {
                "name": "產品數量",
                "type": "bar",
                "data": dataList,
                "barWidth": "60%",
                label: {
                    show: true,
                    position: "top",
                    textStyle: {
                        color: "#0575DE"
                    }
                },
                "itemStyle": {
                    normal: {
                        color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                            offset: 0,
                            color: "#09337C" // 0% 處的顏色
                        }, {
                            offset: 0.6,
                            color: "#0761C0" // 60% 處的顏色
                        }, {
                            offset: 1,
                            color: "#0575DE" // 100% 處的顏色
                        }], false),
                        barBorderRadius: [5, 5, 0, 0],
                    }
                },
                "barGap": "0"
            },
            {
                "name": "產品價格",
                "type": "line",
                "yAxisIndex": 1,
                "data": dataTask,
                lineStyle: {
                    normal: {
                        width: 2
                    },
                },
                label: {
                    show: true,
                    position: "top",
                },
                "itemStyle": {
                    "normal": {
                        "color": "#cdba00",

                    }
                },
                "smooth": true
            }, {
                name: '產品圖片',
                tooltip: {show: false},
                type: 'pictorialBar',
                barGap: '-100%',
                symbolPosition: 'end',
                symbolSize: 70,
                symbolOffset: [0, '-150%'],
                data: data
            }
        ]
    };

    myChart.setOption(option);
    window.addEventListener("resize", function () {
        myChart.resize();
    });

lockdatav done!