ECharts随笔

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()

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

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 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        },