echarts的基本使用以及如何使用官方实例的方法 - z_xun
echarts的基本使用以及如何使用官方实例的方法
<!-- 为 ECharts 准备一个具备大小（宽高）的 DOM --> <div id="box" style="width: 600px;height:400px;"></div> //如果需要改背景色直接在这里修改便可以
export default { data() { return { //调用了eacharts官方实例的 ，这里写option的属性 // 指定图表的配置项和数据 option: { backgroundColor: "#2c343c", title: { text: "Customized Pie", left: "center", top: 20, textStyle: { color: "#ccc" } }, tooltip: { trigger: "item", formatter: "{a} <br/>{b} : {c} ({d}%)" }, visualMap: { show: false, min: 80, max: 600, inRange: { colorLightness: [0, 1] } }, series: [ { name: "访问来源", type: "pie", radius: "55%", center: ["50%", "50%"], data: [ { value: 335, name: "直接访问" }, { value: 310, name: "邮件营销" }, { value: 274, name: "联盟广告" }, { value: 235, name: "视频广告" }, { value: 400, name: "搜索引擎" } ].sort(function(a, b) { return a.value - b.value; }), roseType: "radius", label: { normal: { textStyle: { color: "rgba(255, 255, 255, 0.3)" } } }, labelLine: { normal: { lineStyle: { color: "rgba(255, 255, 255, 0.3)" }, smooth: 0.2, length: 10, length2: 20 } }, itemStyle: { normal: { color: "#c23531", shadowBlur: 200, shadowColor: "rgba(0, 0, 0, 0.5)" } }, animationType: "scale", animationEasing: "elasticOut", animationDelay: function(idx) { return Math.random() * 200; } } ] }, }; },
methods: {
customized() {
var myChart = echarts.init(document.getElementById(\’box\’));
myChart.setOption(this.option,true);
}
最后在main.js入口文件中 全局引入挂载 // 引入echarts // import echarts from \'echarts\' //挂载到实例对象上 // Vue.prototype.$echarts =echarts
================================== 需要加下面两句 这个是main全局引入的 import echarts from \'echarts\' Vue.use(echarts)//全局使用echarts
mounted() {
this.customized();
let _this = this;
_this.$nextTick(() => {
let bargraph = echarts.init(_this.$refs.barg);
bargraph.setOption(_this.option);
window.addEventListener(\’resize\’, bargraph.resize);
});
},
// 客户概况（数据中心） getClientGeneralSituation() { const start = new Date(new Date(new Date().toLocaleDateString()).getTime()); // console.log(parseInt(start.getTime() / 1000) - 86400, \'js 取得今天0点：\'); //Mon Dec 04 2017 00:00:00 GMT+0800 (中国标准时间) const end = new Date(new Date(new Date().toLocaleDateString()).getTime() + 24 * 60 * 60 * 1000 - 1); // console.log(parseInt(end.getTime() / 1000) - 86400, \'js 取得今天 23:59:59\'); //Mon Dec 04 2017 23:59:59 GMT+0800 (中国标准时间) this.$axios .post(\'/platformapi/company_wechat/getClientContactStatistics\', { start_time: this.start_time ? this.start_time : parseInt(start.getTime() / 1000) - 86400, end_time: this.end_time ? this.end_time : parseInt(end.getTime() / 1000) - 86400, userid: this.suserIdArr, section_id: this.sectionIdArr, type: this.type //[必填] type==1 添加客户 type==2 与客户聊天 type==3 客户流失 }) .then(({ data }) => { console.log(data, \'客户概况（数据中心）\'); if (!data.data.data) { return; } this.option.legend.data = \'\'; this.option.xAxis.data = \'\'; this.total_count = data.data.total_count; //总人数 this.newly_increased = data.data.newly_increased; // 昨日新增 this.option.legend.data = data.data.data.ordertype; this.option.xAxis.data = data.data.data.day; // let Max = data.data.data.all[0].data[0]; // data.data.data.all.forEach((item, index) => { // if (index == 0) { // item.lineStyle = { // color: \'#4AB5E5\' // }; // } // if (index == 1) { // item.lineStyle = { // color: \'#6BE6C1\' // }; // } // if (index == 2) { // item.lineStyle = { // color: \'#626C91\' // }; // } // item.data.forEach((node) => { // if (Max < node) { // Max = node; // } // }); // }); // this.option.yAxis.max = \'\'; // this.option.yAxis.max = Max; this.series = []; console.log(data.data.data.all, \'data.data.data.all\'); data.data.data.all.forEach((item, index) => { // this.series.push({ name: item.name, type: item.type, stack: \'总量\', data: item.data, series: [] }); this.series[index] = { name: item.name, type: item.type, data: item.data, series: [] }; }); console.log(this.series, \'this.series1\'); console.log(this.type, \'this.type\'); this.series.forEach((item) => { item.data.forEach((node) => { if (this.type == 1) { item.series.push(node.new_apply_cnt); item.series.push(node.new_contact_cnt); } if (this.type == 2) { item.series.push(node.chat_cnt); item.series.push(node.message_cnt); item.series.push(node.reply_percentage); item.series.push(node.avg_reply_time); } if (this.type == 3) { item.series.push(node.negative_feedback_cnt); } }); }); this.series.forEach((item) => { item.data.forEach((node) => { item.data = item.series; }); }); // this.option.series = data.data.data.all; // this.option.series = [1]; this.option.series = this.series; this.customized(); }); }, customized() { var myChart = echarts.init(document.getElementById(\'box\')); myChart.setOption(this.option, true); }
版权声明：本文为xiaoxiaoxun原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。