ECharts随笔

标签：10 20 myChart echarts 使用 随笔 ECharts

EChats的loading

ECharts中有自带的loading方法 showLoading() 通常搭配 hideLoading()使用

1 xxx.showLoading({
2     text: "数据正在路上...",
3     color: "#409eff",
4     textColor: "#000",
5     maskColor: "rgba(255, 255, 255, 0.2)",
6     zlevel: 0
7　　});

xxx.hideLoading()

 ECharts的自适应宽度

刚开始使用Echarts的时候会发现 当页面宽度改变时,ECharts的canvas并未同步发生变化 ,那就需要用到ECharts的resize()方法

//在Vue2中使用的话,就在mounted生命周期里面添加关于页面宽度的监听事件
1 window.addEventListener("resize", () => { 
2　　 myChart.resize();
3 });

 ECharts+Vue2的使用

在单页面HTML下使用Vue2,并且加上ECharts的使用情况下

第一步:

1         <!-- 引入js -->
2 <script src="./vue.js"></script>
3 <script src="./echarts.js"></script>  
4 <script src="./axios.min.js"></script>//因为需求是通过后端数据返回的值进行echarts展示,所以使用到了axios.js

 第二步:

在最顶部引入echarts,将其绑定在Vue的原型上
1 Vue.prototype.$echarts = echarts;

第三步: 就可以进行正常的使用了

　 1 this.myChart = this.$echarts.init(document.getElementById("myChart")); //初始化echarts容器

 1 option: {
 2     title: {   //标题
 3         text: "xxxxxxxx",
 4         left: 20,
 5         top: 20,
 6             bottom: 20,
 7     textStyle: { //字体样式
 8             color: "#333",
 9             fontSize: 20,
10             },
11         },
12     tooltip: {
13             trigger: "item",
14         },
15     legend: { //边上选项的样式位置
16             type: "scroll",
17             orient: "vertical",
18             right: 10,
19             top: 30,
20             bottom: 20,
21         },
22     series: [  //饼图的样式
23             {
24         // name: "资产状态占比",
25         type: "pie", //pie就是饼图
26         radius: ["40%", "60%"], //两个参数就是环状的饼图
27         itemStyle: { //饼图中每个元素的样式
28         // borderRadius: 10,
29            borderColor: "#fff",30            borderWidth:2, },
31         data: [],
32                 center: ["32%", "50%"],
33         emphasis: {
34                     itemStyle: {
35                         shadowBlur: 10,                                                        
36                         shadowOffsetX: 0,                                     
37                           shadowColor: "rgba(0, 0, 0, 0.5)",
38                     },
39                 },
40             },
41          ],
42        },

　//!!! 在最后通过setOption()使用echarts　　　　　 　　　　this.myChart.setOption(this.option);

 

标签：10,20,myChart,echarts,使用,随笔,ECharts
From： https://www.cnblogs.com/sakixi/p/17602935.html