Vue+Echarts實現(xiàn)柱狀折線圖

更新時間：2022年04月02日 10:12:59 作者：天使的同類

這篇文章主要為大家詳細介紹了Vue+Echarts實現(xiàn)柱狀折線圖，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了Vue+Echarts實現(xiàn)柱狀折線圖的具體代碼，供大家參考，具體內容如下

vue處理json數(shù)據(jù)渲染柱狀折線圖

HTML：

<div id="lineCharts" style="width: 100%; height: 500px; margin-top: 20px"></div>

JS：

drawLineCharts() {
? ? ? ? let data = {sid: "02fertdfg0221",choose: 1,}; ?//這里是接口的傳參
? ? ? ? axios
? ? ? ? ? .request({
? ? ? ? ? ? url: url, ?//接口地址
? ? ? ? ? ? method: "POST",
? ? ? ? ? ? data: JSON.stringify(data),
? ? ? ? ? })
? ? ? ? ? .then((res) => {
? ? ? ? ? ? let dateData = []; //日期
? ? ? ? ? ? let rankingData = []; //排行
? ? ? ? ? ? let commentsData = []; //銷量
? ? ? ? ? ? let outdata = JSON.stringify(res.result); //數(shù)據(jù)
? ? ? ? ? ? let xqo = eval("(" + outdata + ")"); //轉換類型
? ? ? ? ? ? for (var i in xqo) { ? //分別獲取日期 ?排行 ?和 銷量的數(shù)組值
? ? ? ? ? ? ? dateData.push(xqo[i].create_time.substring(0, 10));
? ? ? ? ? ? ? commentsData.push(xqo[i].comments_value);
? ? ? ? ? ? ? rankingData.push(xqo[i].ranking);
? ? ? ? ? ? }
? ? ? ? ? ? this.chartPie = echarts.init(document.getElementById("lineCharts")); ?//表格id
? ? ? ? ? ? this.chartPie.setOption({
? ? ? ? ? ? ? title: {
? ? ? ? ? ? ? ? text: "",
? ? ? ? ? ? ? },
? ? ? ? ? ? ? tooltip: {
? ? ? ? ? ? ? ? trigger: "axis",
? ? ? ? ? ? ? ? axisPointer: {
? ? ? ? ? ? ? ? ? // 坐標軸指示器，坐標軸觸發(fā)有效
? ? ? ? ? ? ? ? ? type: "shadow", // 默認為直線，可選為：'line' | 'shadow'
? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? },
? ? ? ? ? ? ? legend: {
? ? ? ? ? ? ? ? orient: "horizontal",
? ? ? ? ? ? ? ? data: ["熱度", "銷量"],
? ? ? ? ? ? ? },
? ? ? ? ? ? ? grid: {
? ? ? ? ? ? ? ? x: 46,
? ? ? ? ? ? ? ? y: 35,
? ? ? ? ? ? ? ? x2: 37,
? ? ? ? ? ? ? ? y2: 40,
? ? ? ? ? ? ? ? borderWidth: 0,
? ? ? ? ? ? ? },
? ? ? ? ? ? ? calculable: true,
? ? ? ? ? ? ? xAxis: [
? ? ? ? ? ? ? ? {
? ? ? ? ? ? ? ? ? type: "category",
? ? ? ? ? ? ? ? ? data: dateData,
? ? ? ? ? ? ? ? ? splitLine: {
? ? ? ? ? ? ? ? ? ? show: false,
? ? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? ? axisLabel: {
? ? ? ? ? ? ? ? ? ? show: true,
? ? ? ? ? ? ? ? ? ? margin: 20,
? ? ? ? ? ? ? ? ? ? textStyle: {
? ? ? ? ? ? ? ? ? ? ? color: "#a4a7ab",
? ? ? ? ? ? ? ? ? ? ? align: "center",
? ? ? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ],
? ? ? ? ? ? ? yAxis: [
? ? ? ? ? ? ? ? {
? ? ? ? ? ? ? ? ? name: "銷量趨勢",
? ? ? ? ? ? ? ? ? type: "value",
? ? ? ? ? ? ? ? ? splitLine: {
? ? ? ? ? ? ? ? ? ? show: false,
? ? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? ? axisLabel: {
? ? ? ? ? ? ? ? ? ? show: true,
? ? ? ? ? ? ? ? ? ? textStyle: {
? ? ? ? ? ? ? ? ? ? ? color: "#a4a7ab",
? ? ? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? ? // min: 100,
? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? {
? ? ? ? ? ? ? ? ? name: "熱度排名",
? ? ? ? ? ? ? ? ? type: "value",
? ? ? ? ? ? ? ? ? position: "right",
? ? ? ? ? ? ? ? ? splitLine: {
? ? ? ? ? ? ? ? ? ? show: false,
? ? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? ? axisLabel: {
? ? ? ? ? ? ? ? ? ? show: true,
? ? ? ? ? ? ? ? ? ? formatter: "{value}",
? ? ? ? ? ? ? ? ? ? textStyle: {
? ? ? ? ? ? ? ? ? ? ? color: "#a4a7ab",
? ? ? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ],
? ? ? ? ? ? ? series: [
? ? ? ? ? ? ? ? {
? ? ? ? ? ? ? ? ? name: "熱度",
? ? ? ? ? ? ? ? ? type: "bar",
? ? ? ? ? ? ? ? ? barWidth: "20",
? ? ? ? ? ? ? ? ? data: rankingData,
? ? ? ? ? ? ? ? ? itemStyle: {
? ? ? ? ? ? ? ? ? ? normal: {
? ? ? ? ? ? ? ? ? ? ? barBorderRadius: 5,
? ? ? ? ? ? ? ? ? ? ? color: "#36A1DB",
? ? ? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? {
? ? ? ? ? ? ? ? ? name: "銷量",
? ? ? ? ? ? ? ? ? type: "line",
? ? ? ? ? ? ? ? ? // smooth: true,
? ? ? ? ? ? ? ? ? showAllSymbol: true,
? ? ? ? ? ? ? ? ? symbol: "emptyCircle",
? ? ? ? ? ? ? ? ? symbolSize: 5,
? ? ? ? ? ? ? ? ? yAxisIndex: 1,
? ? ? ? ? ? ? ? ? data: commentsData,
? ? ? ? ? ? ? ? ? itemStyle: {
? ? ? ? ? ? ? ? ? ? normal: {
? ? ? ? ? ? ? ? ? ? ? color: "#EEAB56",
? ? ? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ],
? ? ? ? ? ? });
? ? ? ? ? });
? ? },

最后就是效果圖：