想在手机上看到漂亮清晰的数据图吗？记住要选择合适自己手机屏幕大小和分辨率的图表。如果选错了，图像就会模糊不清。那么如何使用Vue和ECharts4Taro3制作好看又实用的手机数据图？今天就跟你们分享一下吧
创建Vue项目
首先，我们得搞定个Vue项目呗。我平时都是用VueCLI，简单快接搞定项目。安装好VueCLI后，在命令行输入几条指令就能创建新项目了，然后选你自己喜欢的配置就完事儿。搞个项目应该轻松？不过别忘了，这可是做响应式应用的开端！
接下来咱们就用npm给要用的软件打包！速度可能会有点慢，具体要看你要安装哪些软件了。别怕，搞定这些依赖后，我们的项目就能正常运行！
配置Taro3环境
搞定Taro3的环境就可以让手机上的APP顺利上线了！首先用TaroCLI创建个新项目，然后搞定那些配置就大功告成了。Taro3的配置确实有点儿折腾，但搞定之后就可以轻松地做跨平台开发了，真的很省时间和精力！
$ vue create data-visualization $ cd data-visualization $ npm install echarts echarts-for-taro3 --save
调试过程中我会搞定程序的适应性问题，包括调整编译参数和完善生成过程等。这样一来，不管是什么设备或系统都能顺利驾驭了~大家拿去手机装好就能立马用起来咯～
创建Chart组件
$ npm install -g @tarojs/cli $ taro init data-visualization $ cd data-visualization
图表小程序咱们马上就开始动手做，名字我都想好了，叫”Chart”。这次我们要用到的是用ECharts4Taro3里面的EChart部件。这份工具特别实用，它会智能地帮你调整图表的大小，省心又方便！
Chart这个东西挺难搞的，试试好几个呗，看看哪个最顺手。还有，务必把它做成响应式的，手机电脑上都能用，屏幕大小也能自动调。
import { EChart } from 'echarts-for-taro3'
export default {
components: {
ec: EChart
},
data() {
return {
chartData: {
// 图表数据
},
chartOptions: {
// 图表配置项
}
}
},
mounted() {
this.$nextTick(() => {
const chartContext = Taro.createCanvasContext('chart', this.$scope)
// 设置响应式样式
chartContext.width = this.$scope.windowWidth
chartContext.height = this.$scope.windowHeight
this.echart = this.$refs['chart'].init(chartContext)
this.echart.setOption(this.chartOptions)
})
}
}
.chart {
width: 100%;
height: 100vh;
}
在App.vue中注册Chart组件
要使用这个Chart组件，先在App.vue里面注册一下，再给它弄点好看点儿的外观！虽然很小一步，但是能够让整个app看起来更有统一感！放心，我引入的样式肯定不会出问题，还可以和别的地方搭配合适！
搞定注册和下拉菜单后，瞅瞅图表在网页上有没有正确显现，再说速度如何？
设置图表的数据和配置项
import Chart from './components/Chart.vue'
import './app.scss'
export default {
components: {
Chart
}
}
@import '~echarts-for-taro3/components/ec-canvas/ec-canvas.wxss';
page {
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
}
到了最后一步了，我们要把数据放到那个叫做’chart’的东西里面去，弄出一个能动的画面来看数据。这个步骤有点难度，就是数据处理还有图标设置有点儿复杂。
别眨眼，快看这些最新的真实数据！我用Vue做了个响应式效果，图表会随着数据变化自动更新~还会自动调整颜色、标签和互动方式，让你们看得更明白，玩得更开心！
data() {
return {
chartData: {
xAxis: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
series: [
{
name: 'Series 1',
data: [120, 200, 150, 80, 70, 110, 130]
},
{
name: 'Series 2',
data: [220, 180, 210, 90, 60, 100, 40]
}
]
},
chartOptions: {
tooltip: {
trigger: 'axis'
},
legend: {
data: ['Series 1', 'Series 2']
},
xAxis: {
type: 'category',
data: []
},
yAxis: {
type: 'value'
},
series: []
}
}
},
mounted() {
this.chartOptions.xAxis.data = this.chartData.xAxis
this.chartOptions.series = this.chartData.series
}
搞定！搞好了这个后，就有了个基本能用的响应式数据可视化面板。为了让它更符合各位的口味，还要把图样和交互效果再弄弄好点。
跟Vue和ECharts4Taro3搭档，就能轻松搞定炫酷的数据展示了。有啥问题就留言别忘了给我点个赞，让更多人看看这个方法！
评论0