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);
        }