| 四步走四步走，要是直接跳到最后的话，记得有些依赖和环境配置一下哦。
1.首先在项目中安装echarts1.安装echarts依赖包 npm install echarts --save 2.在plugins目录下创建echarts.js文件并在里面引入echarts依赖包 import Vue from 'vue'import echarts from 'echarts'//这个需要注意一下有可能会报错，可以用下面方法Vue.prototype.$echarts = echarts 用以上通用的方法，可能会出现以下报错，“export ‘default‘ (imported as ‘echarts‘) was not found in ‘echarts‘ 是因为Echarts 5.x 不再支持上面的引入方式，详情可以查看Echarts官网 总而言之就是改为以下： import Vue from 'vue'import * as echarts from 'echarts' //区别在这里Vue.prototype.$echarts = echarts 3.在nuxt.config.js配置文件中引入我们刚刚创建的echart.js plugins: ['~plugins/echarts'] //我只写了要加这个，不代表这里只有这个 //还可以用'@/plugins/echarts'形式，都差不多的
2.在echarts引入柱形图模板（这里是一步步写下来的，要是不想看可以直接跳到最后有最终代码哦） 
在项目中的代码表示： <template> <div id="echarts"> <div id="myChart"></div> </div></template><script type="text/javascript">export default { name: "Echarts", data() { return {}; }, methods: { echartsInit() { //定义一个创建图表的方法 let myChart = this.$echarts.init(document.getElementById("myChart")); myChart.setOption({ title: { text: "echarts的柱状图来实现疫情统计", textAlign: "auto", left: 'center' }, tooltip: {}, // 省份（横坐标） xAxis: { data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] //data: this.areaName, //这是最后的数据表示开始测试可以先不用这个 type: "category", axisLabel: { rotate: -45, // 旋转30度，不然横坐标显示不完全 show: true, //这行代码控制着坐标轴x轴的文字是否显示 }, }, yAxis: {}, // 确诊数量 series: [ { name: "总确诊数量", type: "bar", //data: this.areaConfirm,//这是最后的数据表示开始测试可以先不用这个 data: [120, 200, 150, 80, 70, 110, 130], }, ], }); }, } //mounted在模板渲染成html后调用，通常是初始化页面完成后 //再对html的dom节点进行一些需要的操作 mounted() { this.echartsInit(); }, }</script><style scoped> #myChart { width: 100%; height: 300px; margin-left: auto; margin-right: auto; }</style>
3.通过API引入数据我用的腾讯提供的接口地址：https://view.inews.qq.com/g2/getOnsInfo?name=disease_h5点击查看 
我们可以看到一大堆数据，那么我们要对数据进行清理和拆分才能获取我们所需要的数据 1.首先我们要解决跨域问题 npm install axios @nuxtjs/axios @nuxtjs/proxy 2.安装完成后在 nuxt.config.js 文件里面添加以下配置： module.exports = {//我显示了要增加的部分，不是全部哦 modules: ["@nuxtjs/axios"], axios: { proxy: true }, proxy: { '/api/': { target: 'https://view.inews.qq.com',//这个网站是开源的可以请求到数据的 pathRewrite: { '^/api/': '/', changeOrigin: true } } },}3.对接口数据进行处理 getData() { this.$axios.get(`/api/g2/getOnsInfo?name=disease_h5`).then(({ data }) => { //console.log(JSON.parse(data.data.replace('//"', "'"))); this.area = JSON.parse( data.data.replace('//"', "'") ).areaTree[0].children; // 地区名 this.areaName = this.area.map((o) => { return o.name; }); // 总确诊人数 this.areaConfirm = this.area.map((o) => { return o.total.confirm; }); console.log(this.areaConfirm); // 目前确诊人数 hh 好像最后我没用，如果有需要可以参考一下 this.areaNowConfirm = this.area.map((o) => { return o.total.nowConfirm; }); this.echartsInit(); }); },
下载地址:
编写 Vue v-for 循环的 7 种方式
Javascript运行机制之Event Loop
|
