标签：vue data myChart 图表 使用 type echarts resize

1. npm install echarts@4.8.0 --save

 

2. 在main.js中全局导入   import echarts from 'echarts' Vue.prototype.$echarts = echarts  

 

3. 在使用的组件中 在html中： <div id="main" style="width: 600px; height: 400px"></div>     在js中： drawChart () {       // 基于准备好的dom，初始化echarts实例       var myChart = this.$echarts.init(document.getElementById('main'));

 

      // 指定图表的配置项和数据       var option = {         title: {           // text: '折线图堆叠'         },         tooltip: {           trigger: 'axis'         },         grid: {           top: '20%',           left: '3%',           right: '4%',           bottom: '3%',           containLabel: true         },         xAxis: {           type: 'category',           boundaryGap: false,           data: ['现在', '11点', '14点', '17点', '20点', '23点', '02点', '05点', '08点'],         },         yAxis: {           type: 'value'         },         series: [           {             name: '温度',             type: 'line',             stack: '总量',             data: [8, 9, 9, 8, 8, 5, 4, 4, 4]           },         ]       };

 

      // 使用刚指定的配置项和数据显示图表。       myChart.setOption(option);       // 跟着缩放       window.addEventListener('resize', function () {         // 让我们的图表调用 resize这个方法         myChart.resize();       });     }

标签：vue,data,myChart,图表,使用,type,echarts,resize
来源： https://www.cnblogs.com/panstarry/p/14123908.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。