Echart輸入資料根據選擇生成對應的圖形類別
阿新 • • 發佈：2019-01-06
.input1,
.input2 {
width: 200px;
margin: 10px;
}
.table {
margin-top: 30px;
width: 800px;
}
#main,#main1{
background: #ff0;
width: 800px;
height:600px;
margin-top: 50px;
}
.select{
width: 200px;
margin-left: 10px;
}
.btn{
margin-left: 10px;
}
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>echarts-demo</title> <script src="../lib/jquery-3.3.1.min.js"></script> <script src="../lib/vue.min.js"></script> <script src="../lib/echarts.min.js"></script> <script src="../lib/iview-2.14.min.js"></script> <script src="../lib/iview-zh-TW.js"></script> <link rel="stylesheet" type="text/css" href="../lib/iview.css"> <link rel="stylesheet" type="text/css" href="../css/echarts-hardy.css"> </head> <body> <div id="hardy" style="margin: 100px"> 請輸入資料: <i-input class="input1" v-model="input_data1" placeholder="請輸入專案"></i-input> <input-number class="input2" v-model="input_data2" placeholder="請輸入資料"></input-number> <i-select v-model="selectModel" class="select" placeholder="請選擇圖表型別" @on-change="select_change"> <i-option value="bar" label="條形統計圖"> </i-option> <i-option value="pie" label="扇形統計圖"> </i-option> <i-option value="line" label="折線統計圖"> </i-option> </i-select> <i-button @click="enter" class="btn">確定</i-button> <div class=table> <i-table :columns='columns1' :data=data1></i-table> </div> <div id="main"></div> <div id="main1"></div> </div> <script src="../js/echarts-hardy.js"></script> </body> </html>
var Main = { data() { return { input_data1: "", input_data2: "", selectModel: "bar", a: [], b: [], data1: [], columns1: [ { title: "專案", key: "name", align: "center" }, { title: "資料", key: "value", align: "center" }, { title: "操作", align: "center", render: (h, params) => { // console.log(params) return h( "i-button", { on: { click: () => { this.dele(params); } } }, "刪除" ); } } ] }; }, // 例項建立完成後立即呼叫 created: function() { $("#main").hide(); $("#main1").hide(); }, methods: { dele: function(params) { this.data1.splice(params.index, 1); this.a.splice(0); this.b.splice(0); for (let i = 0; i < this.data1.length; i++) { this.a.push(this.data1[i].name); this.b.push(this.data1[i].value); } // console.log(this.data1) // console.log(this.a); // console.log(this.b); if (this.selectModel == "line" || this.selectModel == "bar") { this.picture(this.selectModel); } else { this.picture1(this.selectModel); } if (this.data1.length == 0) { $("#main").hide(); $("#main1").hide(); } }, select_change: function(val) { // 清除div內容 // $("#main").empty(); this.selectModel = val; if (this.data1.length > 0) { if (this.selectModel == "line" || this.selectModel == "bar") { this.picture(this.selectModel); } else { this.picture1(this.selectModel); } } }, picture1: function(val) { $("#main1").show(); $("#main").hide(); // 基於準備好的dom，初始化echarts例項 var myChart = echarts.init(document.getElementById("main1")); // 指定圖表的配置項和資料 var option1 = { // 標題 title: { // x軸方向的位置 x: "center", // 文字 text: "Just a test" }, // 設定全域性的文字風格 textStyle: { // color: '#fff', }, // 提示文字 tooltip: { // 觸發器 trigger: "item", formatter: "{a} <br/>{b} : {c} ({d}%)" }, // 圖片的儲存，重新整理，和資料 toolbox: { show: true, feature: { mark: { show: true }, // 資料檢視 dataView: { show: true, readOnly: false }, magicType: { show: true, type: ["pie", "funnel"] }, // 重新整理 restore: { show: true }, // 儲存圖片 saveAsImage: { show: true } } }, // 全域性背景色 backgroundColor: "#ff0", // 圖例說明 legend: { // 圖例資料名 data: this.a, // data:['交通','生活','電子產品','吃飯','學習',], // 顯示方向 orient: "vertical", // x軸方向的位置 x: "right " }, // 圖表資料資訊 series: [ { // 提示框標題 name: "消費", // 圖表型別 type: val, // ：餅圖 // 圖表的中心座標 center: ["50%", "50%"], // 通過配置roseType屬性顯示為南丁格爾圖 roseType: "angle", // roseType:'radius', // 圖表的資料 data: this.data1, // 也可以每個系列分別設定，每個系列的文字設定在 label.textStyle。 label: { normal: { textStyle: { color: "#000" } } }, // 標籤的視覺引導線設定顏色 labelLine: { normal: { lineStyle: { // color: '#0f0' } } }, // itemStyle的emphasis是滑鼠 hover 時候的高亮樣式 itemStyle: { emphasis: { // 設定滑鼠移動上面扇形的顏色 // color: '#c23531', // 陰影的模糊範圍 shadowBlur: 100, // 陰影的橫向偏移 shadowOffsetX: 0, // 陰影顏色 shadowColor: "rgba(0, 0, 0, 0.5)" } }, // 動畫效果 animationType: "scale", animationEasing: "elasticOut", animationDelay: function(idx) { return Math.random() * 200; } } ] }; // 使用剛指定的配置項和資料顯示圖表。 myChart.setOption(option1); }, picture: function(val) { $("#main").show(); $("#main1").hide(); // 基於準備好的dom，初始化echarts例項 var myChart = echarts.init(document.getElementById("main")); // 指定圖表的配置項和資料 var option1 = { title: { text: "ECharts 示例" }, tooltip: {}, // 圖片的儲存，重新整理，和資料 toolbox: { show: true, feature: { mark: { show: true }, // 資料檢視 dataView: { show: true, readOnly: false }, magicType: { show: true, type: ["pie", "funnel"] }, // 重新整理 restore: { show: true }, // 儲存圖片 saveAsImage: { show: true } } }, itemStyle: { // 陰影的大小 shadowBlur: 200, // 陰影水平方向上的偏移 shadowOffsetX: 0, // 陰影垂直方向上的偏移 shadowOffsetY: 0, // 陰影顏色 shadowColor: "rgba(0, 0, 0, 0.5)" }, legend: { // data:this.b, data: ["資料"] }, xAxis: { data: this.a }, yAxis: {}, series: [ { name: "資料", type: val, data: this.b } ] }; // 使用剛指定的配置項和資料顯示圖表。 myChart.setOption(option1); }, enter: function() { let name = this.input_data1; let value = this.input_data2; // console.log(name,value) // console.log(this.input_data1) // console.log(this.input_data2) if (this.input_data1.length != 0 && this.input_data2.length != 0) { this.data1.push({ name, value }); this.a.push(this.input_data1); this.b.push(this.input_data2); this.input_data1 = ""; this.input_data2 = ""; if (this.selectModel == "line" || this.selectModel == "bar") { this.picture(this.selectModel); } else { this.picture1(this.selectModel); } } else { this.$Modal.warning({ title: "提示", content: "輸入內容不能為空!" }); } } } }; var Component = Vue.extend(Main); new Component().$mount("#hardy");
執行結果:
