Echart 使用

简介: Echart 使用

查看前端面试题小程序 大量面试题和答案,请微信查看

// var list = [1,1,54,5,5,85,8,8,5,5,8,8,85,8,8,5,5,85,88,85,8,88,8,8,8,8,88,]; //x轴的 时间
// var list1= [];  //温度数据
// var list2=[]    //湿度数据
// function initChart(canvas, width, height) {
//   const chart = echarts.init(canvas, null, {width: width,height: height});
//   canvas.setChart(chart);
//   var option = {
//     tooltip: {trigger: 'axis'},
//     color: ['#F8DF64', '#76FB4C'], //icon颜色
//     legend: {
//       data: [{name:'温度(℃)',textStyle: {color: '#333'},color:'#000'}, 
//         { name: '湿度(%RH)', textStyle: { color: '#333' }}],  y: 'bottom',
//     },
//     grid: {left: '1%',right: '1%',top: '10%',containLabel: true}, //图形的位置
//     // x坐标
//     xAxis: {type: 'category',boundaryGap: false,data: list,name: '',nameGap: 2,axisLabel: {interval: 0}},
//     // y坐标
//     yAxis: {type: 'value',min: -30,max: 120},
//     series: [
//       {
//         name: '温度(℃)',
//         type: 'line',
//         stack: '总量',
//         smooth: true,
//         itemStyle: {normal: {lineStyle: {color: '#F8DF64'}}},  
//         data: list1
//       }, {
//         name: '湿度(%RH)',
//         type: 'line',
//         smooth: true,
//         stack: '总量',
//         itemStyle: {normal: {lineStyle: {color: '#76FB4C'}}},  
//         data: list2
//       }
//     ]
//   };
//   chart.setOption(option);
//   return chart;
// }

相关文章
|
7月前
|
JavaScript 数据可视化 前端开发
echart图表
echart图表
66 0
|
2月前
|
JavaScript 数据可视化 定位技术
echart:html中使用& echarts 的使用
本文介绍了如何在HTML中使用ECharts图表库,包括通过CDN引入ECharts和ECharts-GL,创建基本的柱状图示例,以及在Vue项目中使用ECharts的方法。同时,提供了快速安装和配置ECharts的代码示例,以及如何添加地图插件的指导。
172 1
|
2月前
|
JavaScript 数据可视化 开发者
echart:里面的属性
这段内容介绍了图表配置中的多个关键组件和属性,包括 `xAxis` 和 `yAxis` 的常见属性设置、`grid` 的布局调整、`dataZoom` 的数据缩放功能、`legend` 的图例配置以及颜色配置等。通过这些配置,可以实现图表的自定义显示,如坐标轴类型、数据源、最小值、最大值、刻度间隔、标签样式、线条样式等,同时还能调整图表在 DOM 元素中的大小和位置,以及实现数据的缩放和平滑交互效果。
|
7月前
Vite中使用 echart
Vite中使用 echart
66 0
|
前端开发 JavaScript 容器
Echarts实战案例代码(31):模态框弹出层无法正常显示echarts图表的解决方案
Echarts实战案例代码(31):模态框弹出层无法正常显示echarts图表的解决方案
261 1
|
JavaScript
vue实现一个饼状图
vue实现一个饼状图
87 2
|
前端开发 JavaScript
Vue+Echarts实现一个饼状图
Vue+Echarts实现一个饼状图
47 0
|
前端开发
【前端统计图】echarts改变颜色属性的demo
【前端统计图】echarts改变颜色属性的demo
44 0
|
JavaScript 定位技术
VUE+echart绘制地图(3D)
基于vue3.0 和 echart的3D地图
738 0